/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
background stretch
Fra : Dj Uncas


Dato : 03-01-05 16:52

Hej alle

Er det muligt med CSS at bestemme et baggrundsbillede som fx er 800*600 px,
og som så "strækkes" ud over hele browseren hvis brugeren fx har 1024*768?
Jeg har kigget rundt, men har ikke fundet noget.



 
 
Knud Gert Ellentoft (03-01-2005)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 03-01-05 17:00

Dj Uncas skrev:

>Er det muligt med CSS at bestemme et baggrundsbillede som fx er 800*600 px,
>og som så "strækkes" ud over hele browseren hvis brugeren fx har 1024*768?

Nej, et baggrundsbillede har den størrelse det har.

PS. Spørgsmål om css hører ikke hjemme her, men i
news:dk.edb.internet.webdesign.html.

Clientisdegruppen er beregnet til spørgsmål om scripts, der
afvikles på brugerens computer.

Du kan finde en oversigt over de danske nyhedsgrupper på
http://usenet.dk/grupper.pl,
og du kan læse om brugen af de danske nyhedsgrupper på
http://usenet.dk og har du spørgsmål om brugen
af nyhedsgrupperne,
så er news:dk.velkommen den rette gruppe.
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Benny Nissen (03-01-2005)
Kommentar
Fra : Benny Nissen


Dato : 03-01-05 17:13

Knud Gert Ellentoft submitted this idea :
> Dj Uncas skrev:
>
>> Er det muligt med CSS at bestemme et baggrundsbillede som fx er 800*600 px,
>> og som så "strækkes" ud over hele browseren hvis brugeren fx har 1024*768?
>
> Nej, et baggrundsbillede har den størrelse det har.
>
> PS. Spørgsmål om css hører ikke hjemme her, men i
> news:dk.edb.internet.webdesign.html.
>
> Clientisdegruppen er beregnet til spørgsmål om scripts, der
> afvikles på brugerens computer.

Og det er også lige præcis det han skal bruge for at strække et
baggrundsbillede, så det fylder hele skærmen.
Ved godt han spurgte efter css, men det kan jo ikke lade sig gøre.
Derfor er javascript nok den eneste løsning, og spørgsmålet hører
derfor til i denne gruppe.

--
Benny


Knud Gert Ellentoft (03-01-2005)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 03-01-05 17:29

Benny Nissen skrev:

>Og det er også lige præcis det han skal bruge for at strække et
>baggrundsbillede, så det fylder hele skærmen.

Det kan heller ikke lade sig gøre med javascript, så enkelt er
det.

Såfremt du finder en javascriptløsning på det, så virker det med
garanti ikke i alle browsere.

Det eneste, han kan, er faktisk en cssløsning, placerer billedet
bagerst med position: absolut og så z-index.

Her kan man så angive en width med 100% men billeder ser som
regel skrækkelige ud, når de ikke bliver vist i deres rigtige
størrelse, så det kan ikke anbefales.
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Sune Storgaard (03-01-2005)
Kommentar
Fra : Sune Storgaard


Dato : 03-01-05 21:20

Knud Gert Ellentoft wrote:

> Det kan heller ikke lade sig gøre med javascript, så enkelt er
> det.

Sikker ?

> Såfremt du finder en javascriptløsning på det, så virker det med
> garanti ikke i alle browsere.

Du er nu på 2 linjer gået fra at være skråsikker til at være næsten sikker
på det måske virker. Klart det ikke vil opføre sig 100% ens i alle browsere,
det er heller ikke alle som understøtter css.

> Det eneste, han kan, er faktisk en cssløsning, placerer billedet
> bagerst med position: absolut og så z-index.

Nej der findes andre muligheder, som f.eks. :
http://javascript.internet.com/bgeffects/full-size-image.html


> Her kan man så angive en width med 100% men billeder ser som
> regel skrækkelige ud, når de ikke bliver vist i deres rigtige
> størrelse, så det kan ikke anbefales.

Det afhænger -overraskende nok, meget af hvilket billede man bruger. Det som
er brugt i eksemplet ser naturligvis skraldespand ud når det er scaleret så
meget, men det kan snildt laves så det ser hæderligt ud. Det ville
selvfølgelig hjælpe hvis man vidste hvad som skulle skaleres.



Dj Uncas (03-01-2005)
Kommentar
Fra : Dj Uncas


Dato : 03-01-05 21:44

Det ville
> selvfølgelig hjælpe hvis man vidste hvad som skulle skaleres.

Jeg havde tænkt på et billede med en gradient effekt der skifter fra noget
mørkt til noget lyst, og det er ikke så fedt hvis det enten bliver gentaget
eller man ikke kan se hele overgangen...



Sune Storgaard (03-01-2005)
Kommentar
Fra : Sune Storgaard


Dato : 03-01-05 23:09

Dj Uncas wrote:
> Det ville
>> selvfølgelig hjælpe hvis man vidste hvad som skulle skaleres.
>
> Jeg havde tænkt på et billede med en gradient effekt der skifter fra
> noget mørkt til noget lyst, og det er ikke så fedt hvis det enten
> bliver gentaget eller man ikke kan se hele overgangen...


Jeg prøvede lige med et par hurtige her:
http://hjem.get2net.dk/speg/gradbar.html
http://hjem.get2net.dk/speg/gradbar2.html

Dog er gradueringerne ikke just optimale så du kan sikkert nemt se "streger
i dem", det kan laves pænere. De fylder dog kun 1-2 KB , hvilket jo ikke er
meget for en baggrund.

Muligt du også kan finde bedre scripts, Hr Ellentoft siger ganske vist den
ikke virker i opera, men jeg har nu ingen problemer. Du bør dog lave et
fallback så der vises noget andet hvis javascripts er slået fra.



Erik Ginnerskov (03-01-2005)
Kommentar
Fra : Erik Ginnerskov


Dato : 03-01-05 23:27

Sune Storgaard wrote:

> Hr Ellentoft siger ganske
> vist den ikke virker i opera, men jeg har nu ingen problemer.

'Hr. Ellentoft' er ikke den eneste, der ikke kan se baggrundsbillede i
Opera, hvis Opera er sat til at identificere sig som Opera. Sætter jeg Opera
til at identificere sig som IE eller Mozilla, virker scriptet godt nok - men
så kunne jeg da lige så godt have brugt IE eller Mozilla.

Mao.: Scriptet kører ikke i Opera (i Opera-forklædning). Altså kan det ikke
anbefales.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Benny Nissen (03-01-2005)
Kommentar
Fra : Benny Nissen


Dato : 03-01-05 23:41

Erik Ginnerskov has brought this to us :
> Sune Storgaard wrote:
>
>> Hr Ellentoft siger ganske
>> vist den ikke virker i opera, men jeg har nu ingen problemer.
>
> 'Hr. Ellentoft' er ikke den eneste, der ikke kan se baggrundsbillede i
> Opera, hvis Opera er sat til at identificere sig som Opera. Sætter jeg Opera
> til at identificere sig som IE eller Mozilla, virker scriptet godt nok - men
> så kunne jeg da lige så godt have brugt IE eller Mozilla.
>
> Mao.: Scriptet kører ikke i Opera (i Opera-forklædning). Altså kan det ikke
> anbefales.

Nej, men det kan vel ændres med en noget mere lemfældig
browser-detection ?
Så vil det virke i flere browsere ...

--
Benny


Erik Ginnerskov (04-01-2005)
Kommentar
Fra : Erik Ginnerskov


Dato : 04-01-05 00:07

Benny Nissen wrote:

> Nej, men det kan vel ændres med en noget mere lemfældig
> browser-detection ?
> Så vil det virke i flere browsere ...

Er browserdetecting overhovedet nødvendig? Jeg har ikke nærlæst scriptet.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Sune Storgaard (04-01-2005)
Kommentar
Fra : Sune Storgaard


Dato : 04-01-05 00:55

Erik Ginnerskov wrote:
> Benny Nissen wrote:
>
>> Nej, men det kan vel ændres med en noget mere lemfældig
>> browser-detection ?
>> Så vil det virke i flere browsere ...
>
> Er browserdetecting overhovedet nødvendig? Jeg har ikke nærlæst
> scriptet.

Åbenbart i det pågældende script som endda ser noget kluntet ud, omend jeg
ikke er den store javascript koder.

Eksemplet var lige det første men tydeligvis ikke det bedste jeg fandt, jeg
er sikker på at det kan gøres så det virker i majoriteten af browsere
(ie,opera & mozilla+kloner, og flere til).

Tror at hvis man sætter sig ned med google i minutter, så skal man nok finde
noget som man kan bruge, jeg vil dog sætte mig ned i min seng istedet.



Knud Gert Ellentoft (03-01-2005)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 03-01-05 21:50

Sune Storgaard skrev:

>Du er nu på 2 linjer gået fra at være skråsikker til at være næsten sikker
>på det måske virker. Klart det ikke vil opføre sig 100% ens i alle browsere,
>det er heller ikke alle som understøtter css.

Jeg får en blank side i Opera, når den bliver detected som Opera.

Under alle omstændigheder en dårlig løsning efter min mening.
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Ryan Kristensen (04-01-2005)
Kommentar
Fra : Ryan Kristensen


Dato : 04-01-05 21:31

On Mon, 3 Jan 2005 21:20:02 +0100, Sune Storgaard <nospam@strueradsl.dk>
wrote:

>> Det eneste, han kan, er faktisk en cssløsning, placerer billedet
>> bagerst med position: absolut og så z-index.
>
> Nej der findes andre muligheder, som f.eks. :
> http://javascript.internet.com/bgeffects/full-size-image.html

Hvis du ser hvad Knud Gert Ellentoft skriver, og kigger nærmere på det
script du linker til, så vil du se, at scriptet bare er en kæmpe omvej,
til at gøre nøjagtigt det samme.
De indsætter en absolut positioneret div, og bruger så javascript til at
udregne den tilgængelige bredde, som de så tildeler billedet.
Med css, kunne dette være gjort med:
<div
style="position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;"><img
src="Compos3f.jpg" style="width:100%;height:100%;" alt="" /></div>
Og det ville virke i alle browsere, dog ville det som Knud Gert Ellentoft
også skriver, ikke blive særligt pænt, da browserne ikke er særligt gode
til at resize billeder.

Hvis du rent faktisk _vil_ bruge javascript, så brug venligst ikke et
script, der tager udgangspunkt i en dårlig browserdetection.
F.eks.
<script type="text/javascript">
var root = (document.compatMode == "CSS1Compat") ?
document.documentElement : document.body;
var sizeX = window.innerWidth || root.clientWidth;
var sizeY = window.innerHeight || root.clientHeight;
document.write('<div
style="position:absolute;top:0;left:0;z-index:1;"><img src=""
width="'+sizeX+'" height="'+sizeY+'" alt="" /></div>');
</script>
Og så fylder det igen langt under det halve. Css-metoden har så stadig den
fordel, at man ikke behøver genberegne bredde og højde, hvis browseren
bliver resized.

--
Ryan Kristensen

Søg
Reklame
Statistik
Spørgsmål : 177554
Tips : 31968
Nyheder : 719565
Indlæg : 6408852
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste