- 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
>> - 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.
> Hvad har du helt nøjagtig gjort?
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.
-- Venlig hilsen
Kurt Hansen
>> 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 ;-)
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 :-(
-- Venlig hilsen
Kurt Hansen
> 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?
-- Venlig hilsen
Kurt Hansen
> 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?
-- Venlig hilsen
Kurt Hansen
> 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;
}
-- Venlig hilsen
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;
> }
> 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.
> 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?
> 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.
-- Venlig hilsen
Kurt Hansen
> 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 :-)
> 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.
> - 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.
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.
> 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.
-- Venlig hilsen
Kurt Hansen
> 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.
-- Venlig hilsen
Kurt Hansen
> 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.
> 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
-- Venlig hilsen
Kurt Hansen
> 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).
