Responsive "fuld brede" baggrunde

Holla der.

Håber ikke min overskrift er alt for misvisende. Men jeg savner en god guide til hvad man skal gøre her i 2013, hvis man gerne vil ha´ en baggrund til at blive vist ens på alle browsere, og i alle opløsninger. Synes det er lidt svært at blive 100% enig med folk på internettet, da der er mange forskellige måder at gøre dette på. Synes også det er svært helt at vide, hvilken opløsning man skal lave sit billede i, hvis man gerne vil helgardere sig. Her tænker jeg eksempelvis på retina og full hd. 

Skal man optimere billedet til 1400x? 1600x? eller mere endnu?

Jeg vil gerne ha´ at det billede jeg ligger op, er i god kvalitet, og går lige til kanten hver gang. Overalt!
Den skal altså ikke ændre sig i størrelsen, hvis nu man læser hjemmesiden på en anden maskine, med en anden opløsning. 

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

Jeg har prøvet det der står på ovenstående link. Uden held. 

Er der nogle der ved hvad der er det bedste at gøre i denne situation?

Mvh. Michael Bay Sørensen

Teddy Carlsen:

Hvilken af metoderne???

Metoden så baggrunden ALTID er "ligned" (fixed?) til både top, bund og side. Ingen scroll, og så skal den tilpasse sig i forhold til størrelsen på skærmopløsning. Jeg er klar over at det sikkert kan give nogle problemer på mobilen, eller hvad?

Billedet er nemlig ikke vector grafik. Det er et billede. Ellers havde jeg også set mange steder hvor der blev skrevet, at SVG formatet var godt til at få billedet til at fylde mindre.

Jeg tænkte at jeg lige så godt kunne gøre det retina, for så at være helgarderet? Jeg er godt klar over at den store opløsning, nok kommer til at gå ud over kvalitetten. 

Jeg har kun set din i full hd, og der ser det jo godt ud. Men igen, det jeg står og mangler, kan ikke laves i vector.

Har prøvet og lege med "cover" attributten. Den også "contain" og andre små ting. Uden rigtig at det giver det samme resultat i alle browser/skærmopløsning.

http://www.mbstech.dk/fit_resolution.jpg

Her er billedet som jeg gerne vil ha´ til at passe sig til skærmens vindue. Sådan altså at billedet er placeret således at:

Venstre top: Altid har de dråber
Venstre bund: Altid er med den pære
Højre top: Altid er med mandarin
Højre bund: Altid er med hindbær

God søndag og tak for dit svar Teddy

Michael Bay Sørensen 

Nå ok.

For at få det resultat du gerne vil skal du bruge:

html {
 height:100%;
 width:100%;
}

body
{

height:100%;
width:100p%;
background:url("dit_billed.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
}

Det er nødvendigt at sætte html og body til 100%. 

Men du har et kvardratisk billed du vil strække til et rektalgen, så det bliver nok temmeligt forvrænget.

Cover og contain duer ikke, da de beholder forholdet imellem højde og brede.

Det bliver et stort billed i 1600 x 1600 fylder det 220kb. hvis det skal dække Retina bliver det næsten dobbelt så stort og så er vi oppe på at bare et billed fylder det samme som hele min side (530kb).

Så der skal fifles med opløsningen.

Teddy 

Jeg benytter mig af følgende til et projekt jeg arbejder på i øjeblikket.

Jeg bruger desuden en <div> til baggrunden, da jeg har flere forskellige.

#div {

  width: 100%;
  height: 100%;
  background-image: url(images/img.jpg);
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-size: cover; (Denne er vigtig)

}

Vil du have at billedet bliver hvor det er, kan du blot tilføje:

  background-attachment: fixed;

Der er flere måder at gøre det på, så det vigtigste er at teste din løsning, så den passer til det du skal bruge den til.

Mikael:

#div {

  width: 100%;
  height: 100%;
  background-image: url(images/img.jpg);
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-size: cover; (Denne er vigtig)

}

Løser ikke problemet, for det første skal han ikke bruge position, og cover duer ikke i forhold til det billed han vil bruge, som skrevet tidligere.

background-attachment: fixed duer heller ikke når der er tale om en div, så skal der bruges  position: absolute; top: 0; left:0; samt z-index.

Det er muligt at bruge flere billeder på samme baggrund, så det er ikke nødvendigt at bruge flere div for at have flere billeder som baggrund. Eksempel

Teddy 

Teddy Carlsen:

Løser ikke problemet, for det første skal han ikke bruge position, og cover duer ikke i forhold til det billed han vil bruge, som skrevet tidligere.

background-attachment: fixed duer heller ikke når der er tale om en div, så skal der bruges  position: absolute; top: 0; left:0; samt z-index.

Det er muligt at bruge flere billeder på samme baggrund, så det er ikke nødvendigt at bruge flere div for at have flere billeder som baggrund. Eksempel

background-attachment: fixed fungerer som sagt i mit tilfælde, da mit baggrundsbillede (i første div) ikke skal rykke sig, og jeg skal benytte flere div'er, da de alle har forskellige baggrunde, og ligger efter hinanden ned langs siden.

Det var blot et eksempel, og det kan som sagt godt være, at det ikke fungerer for trådstarter. Uanset hvad, er det altid rart at se flere muligheder på at håndtere baggrundsbilleder.

Mikael:

background-attachment: fixed fungerer som sagt i mit tilfælde, da mit baggrundsbillede (i første div) ikke skal rykke sig, og jeg skal benytte flere div'er, da de alle har forskellige baggrunde, og ligger efter hinanden ned langs siden.

Det forstår jeg ikke, med en fixed baggrund og cover er baggrunden fyldt ud og er på samme sted, og det resterende indhold scroller henover??

Hvis du har flere div efter hinanden, med hver sin baggrund som man kan scrolle til, er det ikke nødvendigt at bruge fixed, det er kun nødvendigt hvis der er scrollbar på den pågældene div??

Har du ikke et eksempel??

Mikael:

Det var blot et eksempel, og det kan som sagt godt være, at det ikke fungerer for trådstarter. Uanset hvad, er det altid rart at se flere muligheder på at håndtere baggrundsbilleder.

Nu har han jo et meget specifikt problem, og er faret vild i forskellige løsninger, så endnu en som ikke hjælper ham er ikke så smart tværtimod.

Teddy