Baggrundsbillede der skalerer

[Kurt Hansen]

For længe siden var der en tråd om at få et baggrundsbillede til at
fylde hele vinduet/skærmen og der var henvisninger til eksempler der
virkede.

Uanset hvilke søgeord jeg bruger, kan jeg ikke genfinde tråden.

Nogen der kan huske den?
--
Venlig hilsen
Kurt Hansen

[Birger Sørensen]

Kurt Hansen formulerede Thursday:
> For lￜnge siden var der en trￜd om at fￜ et baggrundsbillede til at fylde
> hele vinduet/skï¿œrmen og der var henvisninger til eksempler der virkede.
>
> Uanset hvilke sï¿œgeord jeg bruger, kan jeg ikke genfinde trï¿œden.

>
> Nogen der kan huske den?

Det er ikke lￜnge siden - jeg kan ogsￜ huske det (og de to ting
udelukker hinanden).
Til gengï¿œld kan jeg ikke huske hvad det egentlig var der blev
diskuteret...
Jeg oprettede 2 eksempler :
http://bbsorensen.com/test/baggr/
http://bbsorensen.com/test/baggr/index_u.html

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
Utils http://sdccms.dk/ordbog/ http://sdccms.dk/mailfriend/

[Jens Peter Karlsen]

Begge eksempler har samme problem. Hvis browser vinduet er større end
billedets bredde skalerer det ikke længere.
Hvis man vil dette bør man tænke sig godt om med motivet da ikke alt
skalerer lige godt, men man kan jo prøve sig frem med forskellige
størrelser på browservindue for at se om det ser godt nok ud.

Regards Jens Peter Karlsen.

[Karl Erik Christensen]

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;
}

Billedet bør selvfølgelig være så stort som muligt - ud fra devisen:
stort billede kan altid gøres mindre, lille billede er ikke pænt når det
forstørres kraftigt.

Ja-ja - det er css3, så alle IE versioner < 9 er dømt ude.

Karl Erik.

--
http://dmwebdesign.dk/karlerik/ - Ny hjemmeside
http://produceret-i.dk/ - Køb danske produkter

[Allan Vebel]

Kurt Hansen skrev:

> For længe siden var der en tråd om at få et
> baggrundsbillede til at fylde hele vinduet/skærmen
> og der var henvisninger til eksempler der virkede.

Jeg lavede engang noget på:

http://html-faq.dk/testsider/baggrund/

--
Allan Vebel
http://vebel.dk

[Birger Sørensen]

Efter mange tanker skrev Allan Vebel:

> http://html-faq.dk/testsider/baggrund/

404

[Karl Erik Christensen]

On 24-05-2012 11:49, Karl Erik Christensen wrote:
> Ja-ja - det er css3, så alle IE versioner < 9 er dømt ude.

Sludder :-)

Der findes jo en mængde IE-filtere;

html {
background: url(bg.jpg) no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg',
sizingMethod='scale');
-ms-filter:
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg',
sizingMethod='scale')";
}

Så fungerer browservindue udfyldt med baggrundsbillede i alle
IE-versioner - med de sædvanlige hacks for margener i IE-6.

Gå og kikke:
http://dmwebdesign.dk/karlerik/baggrund/baggrund.html

[Birger Sørensen]

Karl Erik Christensen skrev:

> On 24-05-2012 11:49, Karl Erik Christensen wrote:
>> Ja-ja - det er css3, så alle IE versioner < 9 er dømt ude.
>
> Sludder :-)
>
> Der findes jo en mængde IE-filtere;
>
> html {
> background: url(bg.jpg) no-repeat center center fixed;
> -webkit-background-size: cover;
> -moz-background-size: cover;
> -o-background-size: cover;
> background-size: cover;
> filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg',
> sizingMethod='scale');
> -ms-filter:
> "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg',
> sizingMethod='scale')";
> }
>
> Så fungerer browservindue udfyldt med baggrundsbillede i alle IE-versioner -
> med de sædvanlige hacks for margener i IE-6.
>
> Gå og kikke:
> http://dmwebdesign.dk/karlerik/baggrund/baggrund.html
>
> Karl Erik.

... men billedet bliver også klippet - og det var svjh. problemet
dengang, at det må det ikke.

[Karl Erik Christensen]

On 24-05-2012 17:55, Birger Sørensen wrote:
>> Så fungerer browservindue udfyldt med baggrundsbillede i alle
>> IE-versioner - med de sædvanlige hacks for margener i IE-6.
>>
>> Gå og kikke:
>> http://dmwebdesign.dk/karlerik/baggrund/baggrund.html
>>
>> Karl Erik.
>
> ... men billedet bliver også klippet - og det var svjh. problemet
> dengang, at det må det ikke.
>
> Birger

Aha - det har jeg ikke set.

Så er der en metode, som var min første tanke:

Læs browservinduets størrelse med noget JS, derefter lad php resize et
bg-billede, som så indlæses.

En omfattende process, som sikkert ikke fungerer alligevel, da billedets
propetitioner _vil_ blive forvrænget, hvis der ikke må klippes på bredden.
Og hvis vinduet efterfølgende resizes, hva' så?
Hvis det gøres mindre, kan scroll undgås, men hvis større, så skal
processen starte forfra.

Mission impossible.

[Birger Sørensen]

Karl Erik Christensen forklarede den 24-05-2012:

> On 24-05-2012 17:55, Birger Sørensen wrote:
>>> Så fungerer browservindue udfyldt med baggrundsbillede i alle
>>> IE-versioner - med de sædvanlige hacks for margener i IE-6.
>>>
>>> Gå og kikke:
>>> http://dmwebdesign.dk/karlerik/baggrund/baggrund.html
>>>
>>> Karl Erik.
>>
>> ... men billedet bliver også klippet - og det var svjh. problemet
>> dengang, at det må det ikke.
>>
>> Birger
>
> Aha - det har jeg ikke set.
>
> Så er der en metode, som var min første tanke:
>
> Læs browservinduets størrelse med noget JS, derefter lad php resize et
> bg-billede, som så indlæses.
>
> En omfattende process, som sikkert ikke fungerer alligevel, da billedets
> propetitioner _vil_ blive forvrænget, hvis der ikke må klippes på bredden.
> Og hvis vinduet efterfølgende resizes, hva' så?
> Hvis det gøres mindre, kan scroll undgås, men hvis større, så skal processen
> starte forfra.
>
> Mission impossible.
>
> Karl Erik.

window onresize kan hente et nyt billede. Problemet med det er, at
onresize kaldes ganske mange gange under flytningen - ikke kun når
resize operationen afsluttes - så der vil blive hentet mange billeder,
der ikke skal bruges til noget. SVJH bliver selve resize oprationen
også temmelig rodet - vinduet springer i størrelse, fordi det venter på
en afslutning af funktionen, mens brugeren resizer.
Måske med en timer der startes forfra ved hvert kald til onresize, og
efter udløb henter en baggrund. Der er så en balance mellem længden af
timeren og interval mellem kald til onresize, der skal findes...

Svjh, var det oprindelige spørgsmål også uden js - der blev vist spurgt
efter en ren CSS løsning.
Men jeg kan heller ikke finde tråden igen - og hvis Kurt nu fortalte
hvad det er han har brug for, var det måske nemmere at give et konkret
svar.

[Christian Kragh]

Den 24-05-2012 15:46, Birger Sørensen skrev:
> Efter mange tanker skrev Allan Vebel:
>
>> http://html-faq.dk/testsider/baggrund/
>
> 404
>
> Birger
>

Beklager, min fejl...
Eller det var ikke en fejl, det var helt bevist, jeg har flyttet fra gen
foregående windows server til ny linux server, hvor siden er konverteret
til en wordpress løsning (DNS ændringer tager jo desværre tid)

Jeg har tidligere brugt den fremgangsmåde beskrevet på denne side:
http://www.quackit.com/html/codes/html_stretch_background_image.cfm
Hvor der er et eksempel her:
http://www.quackit.com/html/codes/html_stretch_background_image_example.cfm

Håber det kan bruges...

--
Venlig hilsen
Christian Kragh
------------------
www.Plantimer.dk
www.HTML-Faq.dk

[Christian Kragh]

> Jeg har tidligere brugt den fremgangsmåde beskrevet på denne side:
> http://www.quackit.com/html/codes/html_stretch_background_image.cfm
> Hvor der er et eksempel her:
> http://www.quackit.com/html/codes/html_stretch_background_image_example.cfm
>
> Håber det kan bruges...

Jeg glemte at skrive at jeg har videreudviklet systemet så den henter et
billede der svare til browserens bredde...

Den er ikke helt virksomt i denne version, men har ikke adgang til den
seneste virksomme der er lavet, brug den som inspiration.
Der skal lige laves en onresize på body og en funktion omkring
javascriptet...

Blev lavet til et fotogalleri hvor brugeren ikke skulle hente meget
store billeder når skærmopløsningen ikke havde brug for det, jf.
kvaliteten på denne side:
http://html-faq.dk/?p=167#stoerrelse

<body onresize="showMsg()">


var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' && document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}

if (winW > 200) {
document.getElementById("backgroundimage").src="/back200.jpg";
}
if (winW > 400) {
document.getElementById("backgroundimage").src="/back400.jpg";
}
if (winW > 600) {
document.getElementById("backgroundimage").src="/back600.jpg";
}
if (winW > 800) {
document.getElementById("backgroundimage").src="/back800.jpg";
}
if (winW > 1000) {
document.getElementById("backgroundimage").src="/back1000.jpg";
}
if (winW > 1200) {
document.getElementById("backgroundimage").src="/back1200.jpg";
}
if (winW > 1400) {
document.getElementById("backgroundimage").src="/back1400.jpg";
}
if (winW > 1600) {
document.getElementById("backgroundimage").src="/back1600.jpg";
}
if (winW > 1800) {
document.getElementById("backgroundimage").src="/back1800.jpg";
}
if (winW > 2000) {
document.getElementById("backgroundimage").src="/back2000.jpg";
}
if (winW > 2200) {
document.getElementById("backgroundimage").src="/back2200.jpg";
}
if (winW > 2400) {
document.getElementById("backgroundimage").src="/back2400.jpg";
}
if (winW > 2600) {
document.getElementById("backgroundimage").src="/back2600.jpg";
}
if (winW > 2800) {
document.getElementById("backgroundimage").src="/back2800.jpg";
}
if (winW > 3000) {
document.getElementById("backgroundimage").src="/back3000.jpg";
}


<img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg"
width="100%" height="100%" alt="Smile" id='backgroundimage'>

[Birger Sørensen]

Christian Kragh:
8X

> Jeg glemte at skrive at jeg har videreudviklet systemet så den henter et
> billede der svare til browserens bredde...

Det er væsentligt enklere at sende skærmens størrelse til PHP - eller
noget andet serverside derkan det - og lade et script returnere et
billede i den rigtige størrelse.

I øvrigt lider dit script af statisk hazard : det er ikke givet at
"backgroundimage" findes, når det tildeles en src - og man kan altså
ikke være sikker på, at der overhovedet kommer noget billede på
skærmen.

[Christian Kragh]

Den 25-05-2012 00:37, Birger Sørensen skrev:
> Christian Kragh:
> 8X
>> Jeg glemte at skrive at jeg har videreudviklet systemet så den henter
>> et billede der svare til browserens bredde...

> I øvrigt lider dit script af statisk hazard : det er ikke givet at
> "backgroundimage" findes, når det tildeles en src - og man kan altså
> ikke være sikker på, at der overhovedet kommer noget billede på skærmen.

Der sendes et standard størrelses billede til den besøgende, som så
skiftes ud med et større i det fotoalbum jeg har lavet, så der findes et
billede i den størrelse...

[Birger Sørensen]

Efter mange tanker skrev Christian Kragh:

> Den 25-05-2012 00:37, Birger Sørensen skrev:
>> Christian Kragh:
>> 8X
>>> Jeg glemte at skrive at jeg har videreudviklet systemet så den henter
>>> et billede der svare til browserens bredde...
>> I øvrigt lider dit script af statisk hazard : det er ikke givet at
>> "backgroundimage" findes, når det tildeles en src - og man kan altså
>> ikke være sikker på, at der overhovedet kommer noget billede på skærmen.
>
> Der sendes et standard størrelses billede til den besøgende, som så skiftes
> ud med et større i det fotoalbum jeg har lavet, så der findes et billede i
> den størrelse...

Hvis du lader et script generere et billede af den ønskede størrelse,
behøver du kun at gemme eet billede på serveren, men kan få det i en
vilkensomhelst størrelse, der er <= det billede der er gemt.

[Kurt Hansen]

Den 24/05/12 19.38, Birger Sørensen skrev:

> Men jeg kan heller ikke finde tråden igen - og hvis Kurt nu fortalte
> hvad det er han har brug for, var det måske nemmere at give et konkret
> svar.

Der kom lige noget overarbejde ind over, så jeg er først tilbage i
tråden nu.

Høvdingen insisterer på at have en indgangsportal, da vi har en
"hjemmeside" og 3 webshops. Når man går til www.danacord.dk, skal man
kunne vælge hvor man vil hen. Den vi har nu har kun links til 2.

Tanken om en sådan indgangsside er ikke til diskussion, kan jeg hilse at
sige ;-)

Jeg er helt ude i tovene m.h.t. ideer til layout/indretning, men der
skal være een eller anden for for baggrund, siger han. Det kan
naturligvis løses på mange måder. En af dem er at lægge et billede på,
som gerne må skalere. Om det er smart og om jeg vælger det, aner jeg
ikke endnu, men jeg ville blot genkalde mig den tråd der var om emnet.

[Jørgen Farum Jensen]

Den 24-05-2012 07:54, Kurt Hansen skrev:
> For længe siden var der en tråd om at få et baggrundsbillede
> til at fylde hele vinduet/skærmen og der var henvisninger
> til eksempler der virkede.
>
> Uanset hvilke søgeord jeg bruger, kan jeg ikke genfinde tråden.

Det er længe siden, men den gang fremstillede jeg
http://webdesign101.dk/showcase/background/

--

Med venlig hilsen
Jørgen Farum Jensen