Baggrundsbilleder der ikke scroller

[Kurt Hansen]

Hvordan forhindrer man at baggrunden scroller med?

Birger barslede i sin tid med:

http://bbsorensen.com/test/baggr/
http://bbsorensen.com/test/baggr/index_u.html

- virker fint, men hvis teksten bliver for lang, scroller billedet med.

Jeg har forsøgt mig med position:fixed, men enten sætter jeg det ind det
forkerte sted, ellers også er det ikke det rigtige at bruge.
--
Venlig hilsen
Kurt Hansen

[Karl Erik Christensen]

Hvad har du helt nøjagtig gjort?

Karl Erik.

--
http://dmwebdesign.dk/karlerik/

[Kurt Hansen]

Den 19/10/12 08.20, Karl Erik Christensen skrev:

Eiiii, et modspørgsmål. Puha, det var jeg ikke lige forberedt på :-)

Ok, et trin ad gangen:

I 'baggr.css' sætter jeg 'fixed' på

#baggrundsbillede{
position:absolute fixed;

Det bevirker, at DIV'en med #indhold rykker ned under billedet.

Så forsøger jeg at lime #indhold fast ('fixed' bibeholdes for
#baggrundsbillede):

#indhold{
position:relative;

- ændres til:

#indhold{
position:fixed;
top: 10px;
left: 10px;

Nu er det lige pludselig #indhold der sidder fast, mens
baggrundsbilledet scroller.

[Jørgen Farum Jensen]

Den 19-10-2012 09:17, Kurt Hansen skrev:

>> Hvad har du helt nøjagtig gjort?
>
> Eiiii, et modspørgsmål. Puha, det var jeg ikke lige
> forberedt på :-)

Det burde du have været. Det er noget nemmere at
forholde sig til til et konkret eksempel end
nogle kodestumper i en meddelelse.

Under alle omstændigheder er det background-attachment,
du skal have fat i, se
http://webdesign101.dk/www/background/eksempel_11.html
eller
http://webdesign101.dk/ie7/eksempler/background-attachment.php

Det sidste eksempel ses bedst i et browservindue, der kun
er ~ 1000 pixel bredt.

--

Jørgen Farum Jensen

[Karl Erik Christensen]

Den 19-10-2012 09:17, Kurt Hansen skrev:

> #baggrundsbillede{
> position:absolute fixed;

Kan positinen være radikal?
Ja, den må jo bestemme sig - du hjælper den ikke meget :-)

Hvor stort er dit billede (wxh i px)?

[Kurt Hansen]

Den 19/10/12 09.36, Jørgen Farum Jensen skrev:

> Den 19-10-2012 09:17, Kurt Hansen skrev:
>
>>> Hvad har du helt nøjagtig gjort?
>>
>> Eiiii, et modspørgsmål. Puha, det var jeg ikke lige
>> forberedt på :-)

> Under alle omstændigheder er det background-attachment,
> du skal have fat i

Det forsøgte jeg faktisk, men kunne ikke få det til at virke, så min
kyllingehjerne konkluderede, at det jo ikke nytter at bruge
background-attachment, da billedet jo ikke er sat ind som background i
BODY. Ak ja, sådan arbejder Fedtmule oppe på Viborg-kanten ;-)

> , se
> http://webdesign101.dk/www/background/eksempel_11.html
> eller
> http://webdesign101.dk/ie7/eksempler/background-attachment.php

> Det sidste eksempel ses bedst i et browservindue, der kun
> er ~ 1000 pixel bredt.

Dem var jeg faktisk også inde at kigge på, men da jeg forsøgte at
tilpasse kildekoden til eget brug, gik der kage i den. Kan ikke lige
gøre rede for hvor kæden hoppede af, da jeg har slettet alle mine
mislykkede eksperimenter.

Jeg er dog ikke i tvivl om, at sagerne er i orden, når det er dig der
har lavet det. Problemet er min manglende viden og hvad jeg reelt
foretager mig, når jeg prøver at ændre noget :-(

[Kurt Hansen]

Den 19/10/12 09.44, Karl Erik Christensen skrev:

> Den 19-10-2012 09:17, Kurt Hansen skrev:
>> #baggrundsbillede{
>> position:absolute fixed;
>
> Kan positinen være radikal?

> Ja, den må jo bestemme sig - du hjælper den ikke meget :-)

Er det ikke validt at skrive det på den måde? Okay, men en ny linje
'position:absolute fixed;' har altså samme negative effekt, kan jeg
hilse at sige.

> Hvor stort er dit billede (wxh i px)?

2272 × 1704. Jeg eksperimenterer bare og vil blot sikre mig, at billedet
er stort nok. Det har vel ingen betydning for scale/no-scroll?

[Karl Erik Christensen]

Den 19-10-2012 10:49, Kurt Hansen skrev:
> 2272 × 1704. Jeg eksperimenterer bare og vil blot sikre mig, at billedet
> er stort nok. Det har vel ingen betydning for scale/no-scroll?

GOSH mand - hvor stor er den skærm du ser det på?

Jeg ser da ingen overflow hidden i din kode.

[Karl Erik Christensen]

Den 19-10-2012 11:10, Karl Erik Christensen skrev:
> hvor stor er den skærm du ser det på?

Mener selvflg. skærmopløsning.

[Kurt Hansen]

Den 19/10/12 11.10, Karl Erik Christensen skrev:

> Den 19-10-2012 10:49, Kurt Hansen skrev:
>> 2272 × 1704. Jeg eksperimenterer bare og vil blot sikre mig, at billedet
>> er stort nok. Det har vel ingen betydning for scale/no-scroll?

> GOSH mand - hvor stor er den skærm du ser det på?

1920 * 1080

Men det er vel ikke vigtigt lige nu ... at billedet er "rigeligt" stort?

> Jeg ser da ingen overflow hidden i din kode.

Er det derfor? Og så bliver jeg jo rundforvirret og stiller straks mig
selv et modspørgsmål: "Hvorfor hvad"? Og så står jeg der og flakser med
arnene, for hvad skal jeg svare på dette superintelligente spørgsmål?

Hvor havde du tænkt dig, at den skjulte overflod skulle placeres?

[Kurt Hansen]

Den 19/10/12 11.10, Karl Erik Christensen skrev:

> Den 19-10-2012 10:49, Kurt Hansen skrev:
>> 2272 × 1704. Jeg eksperimenterer bare og vil blot sikre mig, at billedet
>> er stort nok. Det har vel ingen betydning for scale/no-scroll?
>
> GOSH mand - hvor stor er den skærm du ser det på?

> Jeg ser da ingen overflow hidden i din kode.

Kigger du på Birges CSS? Der står det ellers nok så nydeligt:
#baggrundsbillede{
position:absolute;
top:0;
left:0;
bottom:0px;
overflow:hidden;

[Karl Erik Christensen]

Du skal have fat i flg.:

background: url
background-repeat
background-attachment:

Og for nemheds skyld så start med et billede der ikke er særlig stort.

Det vil jo scrolle med teksten, når billedet er større end din
skærmopløsning.

[Kurt Hansen]

Den 19/10/12 11.31, Karl Erik Christensen skrev:

> Den 19-10-2012 11:21, Kurt Hansen skrev:
>> Den 19/10/12 11.10, Karl Erik Christensen skrev:
>>> Den 19-10-2012 10:49, Kurt Hansen skrev:
>>>> 2272 × 1704. Jeg eksperimenterer bare og vil blot sikre mig, at
>>>> billedet
>>>> er stort nok. Det har vel ingen betydning for scale/no-scroll?
>>>
>>> GOSH mand - hvor stor er den skærm du ser det på?
>>
>>> Jeg ser da ingen overflow hidden i din kode.
>>
>> Kigger du på Birges CSS? Der står det ellers nok så nydeligt:
>> #baggrundsbillede{
>> position:absolute;
>> top:0;
>> left:0;
>> bottom:0px;
>> overflow:hidden;
>> }

> Du skal have fat i flg.:
>
> background: url

Øhhh, nå. Jeg har luret lidt på netop den linje hos Birger:

background-image:url( 'body.png');

Og så tænkte jeg, at de da vist ikke havde noget med sagen at gøre og
slettede linjen. Jeg ser nu, at 'body.png' er et hvidt rektangel på
680px × 490px ...
> background-repeat
... som sættes til hvad: ja eller nej?
> background-attachment:
... som jeg har forsøgt flere gange uden held

Nu bevæger vi os væk fra Birgers eksempel, som ikke indeholder de to
sidste. Jeg er glad for at du vil hjælpe, men uden nærmere instrukser om
HVOR de foreslåede skal sættes ind og hvilke værdier de skal have, er
jeg lost.

>
> Og for nemheds skyld så start med et billede der ikke er særlig stort.
>
> Det vil jo scrolle med teksten, når billedet er større end din
> skærmopløsning.
>
> Karl Erik.
>


--

Venlig hilsen
Kurt Hansen

[Karl Erik Christensen]

Den 19-10-2012 11:43, Kurt Hansen skrev:
> Nu bevæger vi os væk fra Birgers eksempel, som ikke indeholder de to
> sidste. Jeg er glad for at du vil hjælpe, men uden nærmere instrukser om
> HVOR de foreslåede skal sættes ind og hvilke værdier de skal have, er
> jeg lost.

Hvis du vil kunne det næste gang du får brug for et baggrundsbillede,
skal du ikke kikke på hvad andre gør.
Birgers eksempel er en smule avanceret - du skal først lære det
grundliggende. Hvis du ikke kan det, lærer du det aldrig.

I øvrigt så mangler du at oplyse om det er hele body baggrunden du vil
udfylde med et billede, skal det stå midt på skærmen, eller er det
f.eks. en div som du vil have billedet i.

Og er det et "portræt" eller er det blot noget farvelade?

[Kurt Hansen]

Den 19/10/12 11.52, Karl Erik Christensen skrev:

> Den 19-10-2012 11:43, Kurt Hansen skrev:
>> Nu bevæger vi os væk fra Birgers eksempel, som ikke indeholder de to
>> sidste. Jeg er glad for at du vil hjælpe, men uden nærmere instrukser om
>> HVOR de foreslåede skal sættes ind og hvilke værdier de skal have, er
>> jeg lost.

> I øvrigt så mangler du at oplyse om det er hele body baggrunden du vil
> udfylde med et billede

Det kommer an på hvad du mener. BODY har jo, i princippet, uendelig i
udstrækning nedad, men hvis jeg har fyldt det SYNLIGE skærmbillede ud OG
det står stille, behøver der jo ikke at være mere, da brugeren aldrig
vil få det at se.

Det vindue som hjemmesiden vises i, skal være udfyldt med et billede fra
hjørne til hjørne uden nogen form for margin. Håber jeg udtrykker mig
klart nok?

, skal det stå midt på skærmen

Igen er abstrakt begreb. Hvis et givent billede er skaleret til at fylde
DET HELE, så mister venstre, midten og højre jo deres mening.

> , eller er det
> f.eks. en div som du vil have billedet i.

Det er jeg sådan set ligeglad med, bare det virker.

> Og er det et "portræt" eller er det blot noget farvelade?

Det ved jeg ikke endnu. Jeg har bare besluttet mig for at bruge det og
derfor vil jeg gerne lave en afprøvet model, som jeg kan bruge som skabelon.

Jeg forstår dog godt spørgsmålet. Et portræt, taget i højformat, vil
komme til at se underligt ud på en 1920 * 1080, men den billedmæssige
side af sagen, leger jeg med senere. Nu skal teknikken på plads først.

[Kurt Hansen]

Den 19/10/12 11.43, Kurt Hansen skrev:

> Den 19/10/12 11.31, Karl Erik Christensen skrev:
>

>> Du skal have fat i flg.:
>>
>> background: url
>
> Øhhh, nå. Jeg har luret lidt på netop den linje hos Birger:
>
> background-image:url( 'body.png');

Hæ, hæ, den danner baggrund for DIV'en med indhold og har således ikke
noget at gøre med baggrundsbilledet, kan jeg se.

[Karl Erik Christensen]

Den 19-10-2012 12:08, Kurt Hansen skrev:
> Det kommer an på hvad du mener. BODY har jo, i princippet, uendelig i
> udstrækning nedad, men hvis jeg har fyldt det SYNLIGE skærmbillede ud OG
> det står stille, behøver der jo ikke at være mere, da brugeren aldrig
> vil få det at se.
>
> Det vindue som hjemmesiden vises i, skal være udfyldt med et billede fra
> hjørne til hjørne uden nogen form for margin. Håber jeg udtrykker mig
> klart nok?
>
> , skal det stå midt på skærmen
>
> Igen er abstrakt begreb. Hvis et givent billede er skaleret til at fylde
> DET HELE, så mister venstre, midten og højre jo deres mening.

Det synlige skærmbillede - hvad er det?

Hvis du bruger et billede på 1000x1000 pixel, vil en skærm på 800x600 jo
aldrig kunne vise hele billedet, der vil komme scroll-bars.

En skærm på 1280x1024 viser billeder med margin.

Derfor er der aldrig noget der er "lige meget" - alt har konsekvenser.

Du kan starte med et "billede" på 10x10 pixel, og repetere det både
vertikalt og horisontalt - background-repeat: repeat repeat;

Prøv så kun at repetere det horisontalt - background-repeat: repeat
no-repeat;

Derefter kan du prøve at "fiksere" det med background-attachment: fixed;
men så skal du have så meget tekst, at du får vertikal scroll-bar.

Jeg tror at disse 3 små øvelser får et lys til at gå op for dig :-)

[Birger Sørensen]

Karl Erik Christensen skrev:
8X

> Det synlige skærmbillede - hvad er det?
>
> Hvis du bruger et billede på 1000x1000 pixel, vil en skærm på 800x600 jo
> aldrig kunne vise hele billedet, der vil komme scroll-bars.
>
> En skærm på 1280x1024 viser billeder med margin.

Prøv at ændre browserstørrelse med et af de eksempler Kurt referer til.

Billedet bør faktisk tilpasse sig browseren.
Det man kan indvende er, at i små vinduer, vil der være spild af
båndbredde, fordi billedet hentes i en meget større opløsning end der
er brug for.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
Utils http://sdccms.dk/ordbog/ http://sdccms.dk/mailfriend/
http://bredelund.dk CMS som det var meningen et sådant skulle være

[Birger Sørensen]

Hvis du bruger fixed, skal det øvrige indhold være absolute, fordi
fixed indgår i det almindelige flow, og resten af indholdet ellers vil
blive skubbet for at gøre plads til det.
Så det rigtige vil umiddelbart være at bruge absolute. Og det skal ikke
få billedet til at scrolle med.

Tror du måske kan mene noget andet...
Når du siger billedet scroller med, betyder det så, at det forsvinder
opad, når du scroller, eller at det bliver stående?

Hvis det du vil opnå er, at billedet bliver stående, og altså ikke
flytter sig, når der scrolles, så prøv at sætte fixed på
#baggrundsbillede, og sæt alt andet i en absolut positioned div.

<div id="baggrundsbillede"><img ...> </div> <!-- fixed -->
<div id="indhold"> <!-- position:absolute;top:0px;left:0px -->
<!-- øvrigt indhold -->
</div>

[Kurt Hansen]

Den 19/10/12 12.43, Karl Erik Christensen skrev:

> Den 19-10-2012 12:08, Kurt Hansen skrev:
>> Det kommer an på hvad du mener. BODY har jo, i princippet, uendelig i
>> udstrækning nedad, men hvis jeg har fyldt det SYNLIGE skærmbillede ud OG
>> det står stille, behøver der jo ikke at være mere, da brugeren aldrig
>> vil få det at se.
>>
>> Det vindue som hjemmesiden vises i, skal være udfyldt med et billede fra
>> hjørne til hjørne uden nogen form for margin. Håber jeg udtrykker mig
>> klart nok?
>>
>> , skal det stå midt på skærmen
>>
>> Igen er abstrakt begreb. Hvis et givent billede er skaleret til at fylde
>> DET HELE, så mister venstre, midten og højre jo deres mening.

> Det synlige skærmbillede - hvad er det?

Nu kører den da helt af sporet. Taler vi ikke om at skalere et billede,
så det fylder hele skærmen/vinduet. Om det så bliver nok så meget vredet
ud af proportioner, er ikke vigtigt. Det er op til brugeren at afgøre om
han synes det er acceptebalet med det billede i den størrelse han nu har
valgt.

> Hvis du bruger et billede på 1000x1000 pixel, vil en skærm på 800x600 jo
> aldrig kunne vise hele billedet, der vil komme scroll-bars.
>
> En skærm på 1280x1024 viser billeder med margin.

Jamen så har jeg, til min store undren, ikke formået at forklare mig
forståeligt. Hvis der kommer en margin, fylder det jo IKKE hele
skærmen/vinduer. Stikker det udenfor og løber ind under kanten på din
monitor, er skaleringen ikke implementeret ordentligt.

Pinde-pinde-ud: Hvis jeg har et browservindue der har et areal på 639 *
813 pixels, så skal billedes skaleres så det også bliver 639 * 813. Det
var DET jeg mente med "fra hjørne til hjørne".

> Derfor er der aldrig noget der er "lige meget" - alt har konsekvenser.
>
> Du kan starte med et "billede" på 10x10 pixel, og repetere det både
> vertikalt og horisontalt - background-repeat: repeat repeat;
>
> Prøv så kun at repetere det horisontalt - background-repeat: repeat
> no-repeat;
>
> Derefter kan du prøve at "fiksere" det med background-attachment: fixed;
> men så skal du have så meget tekst, at du får vertikal scroll-bar.

Oooookay, grundlæggende HTML har jeg da styr på. Det her handler om CSS,
hvor et skaleret billede skal være naglet fast og noget indhold kan
scrolle ovenpå.

Suk. Kommunikation er en svær ting.

[Kurt Hansen]

Den 19/10/12 13.49, Birger Sørensen skrev:

> Karl Erik Christensen skrev:
> 8X
>> Det synlige skærmbillede - hvad er det?
>>
>> Hvis du bruger et billede på 1000x1000 pixel, vil en skærm på 800x600
>> jo aldrig kunne vise hele billedet, der vil komme scroll-bars.
>>
>> En skærm på 1280x1024 viser billeder med margin.

> Prøv at ændre browserstørrelse med et af de eksempler Kurt referer til.
>
> Billedet bør faktisk tilpasse sig browseren.
> Det man kan indvende er, at i små vinduer, vil der være spild af
> båndbredde, fordi billedet hentes i en meget større opløsning end der er
> brug for.

Yes, men hvis jeg gør vinduet så lille i højden, at det er nødvendigt at
scrolle, for at læse indholdet i DIV'en, så scroller baggrunden med.

[Karl Erik Christensen]

Den 19-10-2012 13:59, Kurt Hansen skrev:
> Pinde-pinde-ud: Hvis jeg har et browservindue der har et areal på 639 *
> 813 pixels, så skal billedes skaleres så det også bliver 639 * 813. Det
> var DET jeg mente med "fra hjørne til hjørne".

Hvor bredt og hvor højt bliver billedet så?

Hint: prøv med nogle %'er :-)

Men det kommer til at se tosset ud, og derfor har Birger givet et par
eksempler på hvordan den ged kan barberes.
Jeg mener bare, at sålænge du ikke kan gennemskue Birger's eksempel,
kunne det være en god ide at lære/genopfriske det grundliggende.

[Kurt Hansen]

Den 19/10/12 14.20, Karl Erik Christensen skrev:

> Den 19-10-2012 13:59, Kurt Hansen skrev:
>> Pinde-pinde-ud: Hvis jeg har et browservindue der har et areal på 639 *
>> 813 pixels, så skal billedes skaleres så det også bliver 639 * 813. Det
>> var DET jeg mente med "fra hjørne til hjørne".
>
> Hvor bredt og hvor højt bliver billedet så?
>
> Hint: prøv med nogle %'er :-)

Man ska' da osse ... 100% * 100%, selvfølgelig.

> Men det kommer til at se tosset ud

Det var bare ikke det jeg spurgte om.

> Jeg mener bare, at sålænge du ikke kan gennemskue Birger's eksempel,
> kunne det være en god ide at lære/genopfriske det grundliggende.

Okay, vi stopper her. Det kommer vi ingen vegne med

[Birger Sørensen]

Den 19-10-2012, skrev Kurt Hansen:
8X

> Pinde-pinde-ud: Hvis jeg har et browservindue der har et areal på 639 * 813
> pixels, så skal billedes skaleres så det også bliver 639 * 813. Det var DET
> jeg mente med "fra hjørne til hjørne".

8X

Her får du et problem. Ikke alle browservinduer har samme størrelses
forhold (højde/bredde). Så i *nogle* vinduer, vil billedet blive
forvrænget - og med mindre det blot er en eller anden form for mønster,
der kan tåle det, vil det *ikke* se hverken smart eller godt ud!
Man må kun skalere efter den ene dimension - er det derefter for småt,
får man baggrunden igennem - er det for stort, får man scrollbar (hvis
man ikke bruger overflow:hidden; til at klippe det med).

[Karl Erik Christensen]

Den 19-10-2012 15:18, Kurt Hansen skrev:
> Okay, vi stopper her. Det kommer vi ingen vegne med

Hvor der er en vilje, er der en vej.

Jeg skal ikke holde dig på pinebænken længere:

body {
background-size: 100% 100%;
background-image: url(billede.gif);
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -100;
}

Så lidt skal der altså til for at opnå det du gerne vil (hvis jeg har
forstået dig ret).

background-size er css3 - ellers kan det ikke gøres på den måde.
Dvs. du taber alt fra IE8 og ned.

Jeg sagde jo at det vil se tosset ud.
Du skal bruge et kvadratisk billede for pænt resultat.

http://www.dmwebdesign.dk/karlerik/test/baggrund/baggrund.html

[Erik Ginnerskov]

"Kurt Hansen" <ku...@ugyldig.invalid> skrev i meddelelsen
news:5081130e$0$8759$c3e8da3$2bd0...@news.astraweb.com...

>> Under alle omstændigheder er det background-attachment,
>> du skal have fat i
>
> Det forsøgte jeg faktisk, men kunne ikke få det til at virke, så min
> kyllingehjerne konkluderede, at det jo ikke nytter at bruge
> background-attachment, da billedet jo ikke er sat ind som background i
> BODY.

Jamen, hvis du vil have baggrundsbilledet fastfrosset i browservinduet, når
siden scrolles, så _skal_ baggrundsbilledet sættes på body og det fastlåses
med background-attachment:fixed;. Længere er den ikke.

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

[Birger Sørensen]

Karl Erik Christensen formulerede fredag:
8X

> Du skal bruge et kvadratisk billede for pænt resultat.

8X

Hvis browservinduet er kvadratisk.
Ellers er det noget vrøvl. Baggrundsbilledet vil altid blive
forvrænget, med undtagelse af de steder hvor proprtionerne tilfældigvis
er ens.

[Karl Erik Christensen]

Den 20-10-2012 01:30, Birger Sørensen skrev:
> Karl Erik Christensen formulerede fredag:
> 8X
>> Du skal bruge et kvadratisk billede for pænt resultat.
> 8X
>
> Hvis browservinduet er kvadratisk.
> Ellers er det noget vrøvl. Baggrundsbilledet vil altid blive forvrænget,
> med undtagelse af de steder hvor proprtionerne tilfældigvis er ens.
>
> Birger
>

Det har du så fuldstændig ret i.
Jeg spekulerede på om jeg skulle rette det, men valgte så at lade det stå.

Man kan aldrig få et billede til at bevare proportionerne. Enten er
skærmen 4:3, 16:9 eller noget helt femte.

[Karl Erik Christensen]

Den 20-10-2012 01:43, Karl Erik Christensen skrev:

> skærmen

browservinduet.

[Kurt Hansen]

Den 19/10/12 23.58, Erik Ginnerskov skrev:

>
> "Kurt Hansen" <ku...@ugyldig.invalid> skrev i meddelelsen
> news:5081130e$0$8759$c3e8da3$2bd0...@news.astraweb.com...
>

>>> Under alle omst�ndigheder er det background-attachment,

>>> du skal have fat i
>>

>> Det fors�gte jeg faktisk, men kunne ikke f� det til at virke, s� min

>> kyllingehjerne konkluderede, at det jo ikke nytter at bruge
>> background-attachment, da billedet jo ikke er sat ind som background i
>> BODY.
>
> Jamen, hvis du vil have baggrundsbilledet fastfrosset i browservinduet,

> n�r siden scrolles, s� _skal_ baggrundsbilledet s�ttes p� body og det
> fastl�ses med background-attachment:fixed;. L�ngere er den ikke.
>

Netop, det var d�t jeg kom frem til i min husmandsanalyse. Ergo (med al
respekt i �vrigt) duer Birgers eksempel ikke til det jeg "forlanger".

[Jan Hansen]

Har du prøvet med

<div style="position:fixed;
top:0px; left:0px; z-index:-1;
width:100%; height:100%;
background-position: absolute;
background-image:url('baggrund.jpg');
background-size: cover;"></div>

Billedet fylder hele browservinduet, bevarer proportionerne,
og scroller ikke.
Det virker i opera 12.02 og firefox 12.0.

[Birger Sørensen]

Følgende er skrevet af Kurt Hansen:

> Den 19/10/12 23.58, Erik Ginnerskov skrev:
>>
>> "Kurt Hansen" <ku...@ugyldig.invalid> skrev i meddelelsen
>> news:5081130e$0$8759$c3e8da3$2bd0...@news.astraweb.com...
>>

>>>> Under alle omstændigheder er det background-attachment,

>>>> du skal have fat i
>>>

>>> Det forsøgte jeg faktisk, men kunne ikke få det til at virke, så min

>>> kyllingehjerne konkluderede, at det jo ikke nytter at bruge
>>> background-attachment, da billedet jo ikke er sat ind som background i
>>> BODY.
>>
>> Jamen, hvis du vil have baggrundsbilledet fastfrosset i browservinduet,

>> når siden scrolles, så _skal_ baggrundsbilledet sættes på body og det

>> fastlåses med background-attachment:fixed;. Længere er den ikke.
>>
>
> Netop, det var dét jeg kom frem til i min husmandsanalyse. Ergo (med al
> respekt i øvrigt) duer Birgers eksempel ikke til det jeg "forlanger".

Billedet i en div med position:fixed.
Resten i en div, med position:absolute.

[Kurt Hansen]

Den 20/10/12 08.56, Birger Sï¿œrensen skrev:
> Fï¿œlgende er skrevet af Kurt Hansen:

>> Den 19/10/12 23.58, Erik Ginnerskov skrev:
>>>
>>> "Kurt Hansen" <ku...@ugyldig.invalid> skrev i meddelelsen
>>> news:5081130e$0$8759$c3e8da3$2bd0...@news.astraweb.com...
>>>

>>>>> Under alle omstï¿œndigheder er det background-attachment,

>>>>> du skal have fat i
>>>>

>>>> Det forsￜgte jeg faktisk, men kunne ikke fￜ det til at virke, sￜ min

>>>> kyllingehjerne konkluderede, at det jo ikke nytter at bruge
>>>> background-attachment, da billedet jo ikke er sat ind som background i
>>>> BODY.
>>>
>>> Jamen, hvis du vil have baggrundsbilledet fastfrosset i browservinduet,

>>> nￜr siden scrolles, sￜ _skal_ baggrundsbilledet sￜttes pￜ body og det
>>> fastlï¿œses med background-attachment:fixed;. Lï¿œngere er den ikke.
>>>
>>
>> Netop, det var dï¿œt jeg kom frem til i min husmandsanalyse. Ergo (med
>> al respekt i ï¿œvrigt) duer Birgers eksempel ikke til det jeg "forlanger".

> Billedet i en div med position:fixed.
> Resten i en div, med position:absolute.

Jeg har lagt en tekst ind der tvinger til scrollning og rettet CSS til:

#baggrundsbillede{
// position:fixed;

position:absolute;
top:0;
left:0;
bottom:0px;
overflow:hidden;
}

og

#indhold{
// position:relative;
position:absolute;
width:600px;
text-align:left;
margin:20px auto 20px auto;
padding:10px;
color:#000;
border:solid 2px #ddd;
background-image:url( 'body.png');
}

Resten fra dit eksempel http://bbsorensen.com/test/baggr/ er uï¿œndret.

Som jeg lï¿œser dit indlï¿œg, skulle de to ï¿œndrede 'position' gï¿œre, at
billedet ikke scroller med? Det gï¿œr det, kan jeg hilse at sige.

Mens du tygger lidt pￜ den (og mￜske afprￜver om jeg har ret), vil jeg
brygge lidt pￜ Karl Eriks forslag.

[Karl Erik Christensen]

Den 20-10-2012 14:05, Kurt Hansen skrev:
> Mens du tygger lidt pￜ den (og mￜske afprￜver om jeg har ret), vil jeg
> brygge lidt pￜ Karl Eriks forslag.

Som du ser, er det uhyre vanskeligt at resize et billede til at fylde
hele vinduet. Det gï¿œr altid galt med proportionerne.

Hvis du udskifter:
background-size: 100% 100%;

med:
background-position: center center;

fï¿œr du ikke alene "ren" css2, men billedet bevarer den oprindelige form,
og placeres midt i vinduet.

Nￜ, nu mￜ jeg tilbage til kￜkkenet - jeg bager "Krydderkage", eller
"Sￜsterkage" som den ogsￜ kaldes :-)

[Karl Erik Christensen]

Den 20-10-2012 14:05, Kurt Hansen skrev:

> #baggrundsbillede{
> // position:fixed;
> position:absolute;
> top:0;
> left:0;
> bottom:0px;
> overflow:hidden;
> }
> og
>
> #indhold{
> // position:relative;
> position:absolute;

Det er sikkert også en god ide lige at opfriske sine position
kundskaber. Du bruger da vist position i flæng, og helt unødvendigt:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

[Kurt Hansen]

Den 19/10/12 07.38, Kurt Hansen skrev:

> Hvordan forhindrer man at baggrunden scroller med?
>
> Birger barslede i sin tid med:
>
> http://bbsorensen.com/test/baggr/
> http://bbsorensen.com/test/baggr/index_u.html
>
> - virker fint, men hvis teksten bliver for lang, scroller billedet med.
>
> Jeg har forsøgt mig med position:fixed, men enten sætter jeg det ind det
> forkerte sted, ellers også er det ikke det rigtige at bruge.

Sådan: http://www.danacord.dk/baggrundsbillede/baggrundsbillede.html ?

Jeg har omsat IN-spiration til TRAN-spiration og takker Karl Erik,
Birger og Jørgen (+ et par stykker mere som har pippet med i tråden).

Nu er den ønskede effekt på plads og så er det jo op mig mig selv, om
jeg ønsker at gøre brug af den ;-)

[Kurt Hansen]

Den 20/10/12 15.28, Karl Erik Christensen skrev:

> Den 20-10-2012 14:05, Kurt Hansen skrev:
>> #baggrundsbillede{
>> // position:fixed;
>> position:absolute;
>> top:0;
>> left:0;
>> bottom:0px;
>> overflow:hidden;
>> }
>> og
>>
>> #indhold{
>> // position:relative;
>> position:absolute;
>

> Det er sikkert ogsￜ en god ide lige at opfriske sine position
> kundskaber. Du bruger da vist position i flï¿œng, og helt unï¿œdvendigt:
>
> http://www.barelyfitz.com/screencast/html-training/css/positioning/

Hvilket jeg har gjort i mellemtiden pￜ W3C, men det link du giver, er
fyldigere, sￜ tak for det.

[Karl Erik Christensen]

Den 20-10-2012 16:24, Kurt Hansen skrev:
> Sådan: http://www.danacord.dk/baggrundsbillede/baggrundsbillede.html ?
>
> Jeg har omsat IN-spiration til TRAN-spiration og takker Karl Erik,
> Birger og Jørgen (+ et par stykker mere som har pippet med i tråden).
>
> Nu er den ønskede effekt på plads og så er det jo op mig mig selv, om
> jeg ønsker at gøre brug af den ;-)

Bare rolig, transpiration findes der midler mod - kaldes vand og sæbe :-)

Flot resultat du har opnået, bravo.

Der er dog et par mindre omveje - du kunne sikkert fjerne class
"skaleret", og lægge billedet ind som "ægte" baggrundsbillede i #baggrund.

Men jeg fornemmer nu, at du er klar over hvad du laver - i modsætning
til før :-)
Tror også du ved hvorfor der bruges z-index?

Har du lyst til at lege videre, kunne du kikke på "opacity" - men det er
css3, dog med "fix" for IE8 og ældre:
http://www.w3schools.com/css/css_image_transparency.asp

[Birger Sørensen]

Den 10/20/2012, skrev Kurt Hansen:
> Den 20/10/12 08.56, Birger Sørensen skrev:
>> Følgende er skrevet af Kurt Hansen:

>>> Den 19/10/12 23.58, Erik Ginnerskov skrev:
>>>>
>>>> "Kurt Hansen" <ku...@ugyldig.invalid> skrev i meddelelsen
>>>> news:5081130e$0$8759$c3e8da3$2bd0...@news.astraweb.com...
>>>>

>>>>>> Under alle omstændigheder er det background-attachment,

>>>>>> du skal have fat i
>>>>>

>>>>> Det forsøgte jeg faktisk, men kunne ikke få det til at virke, så min

>>>>> kyllingehjerne konkluderede, at det jo ikke nytter at bruge
>>>>> background-attachment, da billedet jo ikke er sat ind som background i
>>>>> BODY.
>>>>
>>>> Jamen, hvis du vil have baggrundsbilledet fastfrosset i browservinduet,

>>>> når siden scrolles, så _skal_ baggrundsbilledet sættes på body og det

>>>> fastlåses med background-attachment:fixed;. Længere er den ikke.
>>>>
>>>
>>> Netop, det var dét jeg kom frem til i min husmandsanalyse. Ergo (med
>>> al respekt i øvrigt) duer Birgers eksempel ikke til det jeg "forlanger".

>
>> Billedet i en div med position:fixed.
>> Resten i en div, med position:absolute.
>
> Jeg har lagt en tekst ind der tvinger til scrollning og rettet CSS til:
>
> #baggrundsbillede{
> // position:fixed;
> position:absolute;
> top:0;
> left:0;
> bottom:0px;
> overflow:hidden;
> }
> og
>
> #indhold{
> // position:relative;
> position:absolute;
> width:600px;
> text-align:left;
> margin:20px auto 20px auto;
> padding:10px;
> color:#000;
> border:solid 2px #ddd;
> background-image:url( 'body.png');
> }
>

> Resten fra dit eksempel http://bbsorensen.com/test/baggr/ er uændret.
>
> Som jeg læser dit indlæg, skulle de to ændrede 'position' gøre, at billedet
> ikke scroller med? Det gør det, kan jeg hilse at sige.
>
> Mens du tygger lidt på den (og måske afprøver om jeg har ret), vil jeg brygge
> lidt på Karl Eriks forslag.

Først, skal billedet være position:fixed;
Dernæst skal #indhold have tilføjet top:0px; left:0px; - ellers bruger
i hvert fald nogle browsere, værdier for dokumentets flow, og det vil
ikke virke.
Har ikke testet.

[Birger Sørensen]

Så testede jeg alligevel:

http://bbsorensen.com/test/baggr/index_w.html

[Karl Erik Christensen]

Den 20-10-2012 17:11, Karl Erik Christensen skrev:
> Har du lyst til at lege videre, kunne du kikke på "opacity"

Måtte den gode Gud se i nåde til os legebørn :-)

body {
background-size: auto 100%;
background-position: center center;
background-image: url(../moon.gif);
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -1;
}

#wrapper {
width: 250px;
margin: 50px auto;
padding: 5px;
color: #fff;
z-index: 1;
background-color: #000;
border: 1px solid red;
opacity: 0.5;
filter: alpha(opacity=60);
}

background-sixe er css3, men:

Hvis billedet er højere end det er bredt: auto 100%
Hvis det er bredere end det er højt: 100% auto
Så bevares proportionerne.

Opacity er også css3, men med filter for IE8 og ældre.

http://www.dmwebdesign.dk/karlerik/test/baggrund/baggrund.html

Sort og hvid er ikke lige de bedste farver at arbejde med, men ideen er
vist til at forstå :-)

[Karl Erik Christensen]

Så kan du jo lige så godt gå hele vejen:

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Samt oplyse kilden:
http://css-tricks.com/perfect-full-page-background-image/