scale image to fit browser

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

scale image to fit browser

Indlæg af cristian » 30. sep 2013, 16:27

Hej alle.

Jeg har en et test domæne (da det er nemmest) mnrb.dk.

Hvor jeg har prøvet at scale et baggrunds billed der er større end skærmen, ned til at passe "perfekt" i browser vinduet.

Dog virker dette ikke rigtig da siderne (alle sider) går udover browser vinduet.

Nogle der kan fortælle mig hvordan man scaler billedet ned til at passe "perfekt"?

Måden jeg har prøvet at gøre det på er som følger.

Kode: Vælg alt

body {
    background-image: url(http://wallpaperuser.com/wp-content/uploads/2012/07/fire-horse-wallpaper.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed; 
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
    
    background-size: cover; 
}

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg: 1528
Tilmeldt: 28. dec 2010, 10:49

Re: scale image to fit browser

Indlæg af ThomasI » 1. okt 2013, 19:45

Du skal have gang i noget jQuery + css :)

Se her: http://css-tricks.com/how-to-resizeable ... und-image/

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: scale image to fit browser

Indlæg af cristian » 1. okt 2013, 22:27

Prøvede dit link. Og det var det der har været tættest på, men foden af billedet går over browser vinduet, så man skal scrolle ned for at se hele billedet.

Har også kikket på dette link (før jeg skrev her)
http://css-tricks.com/perfect-full-page ... und-image/

Og her skriver de at

Kode: Vælg alt

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;
}
Kan give det ønskede resultat. Men igen så bliver alle siderne i mit eksempel beskåret en smule. Hvilket er irriterende.

Jeg er ikke nok inde i CSS3 for at se om overstående ren faktisk kan give det ønskede resultat. Og hvad der skal ændres for at komme dertil i forhold til min side.
Men brugerne af siden skriver da at de har haft success med det.

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg: 709
Tilmeldt: 21. jun 2012, 23:40
Kontakt:

Re: scale image to fit browser

Indlæg af scootergrisen » 2. okt 2013, 00:07

Kode: Vælg alt

      body {
         background: url('billede.png');
         background-size: 100% 100%;
         background-repeat: no-repeat;
         background-attachment: fixed;
      }
Demo : http://netkoder.dk/netkoder/eksempler/eksempel0011.html

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: scale image to fit browser

Indlæg af cristian » 2. okt 2013, 10:02

scootergrisen skrev:

Kode: Vælg alt

      body {
         background: url('billede.png');
         background-size: 100% 100%;
         background-repeat: no-repeat;
         background-attachment: fixed;
      }
Demo : http://netkoder.dk/netkoder/eksempler/eksempel0011.html
:o Tak scooter grisen!! <3 til dig!

Jeg har brugt timer på dette, og ingen løsninger fungerede på nettet.
Og igår var jeg klar til at begå PC mord.

Kode: Vælg alt

background-size: 100% 100%;
Siger vel at x og y skal være 100% i begge retninger?

Kode: Vælg alt

background-repeat: no-repeat;
I know what this does atleast :)

Kode: Vælg alt

background-attachment: fixed
Men hvad betyder fixed i denne sammenhæng?

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg: 709
Tilmeldt: 21. jun 2012, 23:40
Kontakt:

Re: scale image to fit browser

Indlæg af scootergrisen » 2. okt 2013, 17:53

fixed betyder at billedet skal stå fast så hvis der var nok indhold på siden og der var scrollbars så ville billedet ikke scrolle med men i stedet stå fast samme sted.

Besvar