Dynamiske baggrund og CSS3

Tags:    css3

Jeg har en baggrund, som bruges til normale sider, men da der er en række sider, som vil have en unik baggrund (billeder) vil jeg meget gerne kunne bruge CSS3's "background-size: cover" til at sørge for at det unikke billede strækker sig korrekt.

En løsning er at lave en ekstra div, men jeg har hørt at det skulle være en usikker måde at gøre det på, selvom jeg ikke lige er klar over hvorfor.

Jeg vil meget gerne undgå at bruge javascript, hvis det er muligt. Jeg udvikler ud fra ikke at understøtte IE8 og ned, så findes der nogle andre "HTML5 måder" art gøre det på, er det også ok.

Nogen idéer til en løsning?



Indlæg senest redigeret d. 04.01.2013 15:16 af Bruger #16282
10 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
Hvis du først bruger en property som alle browsere understøtter så er du sikker på det er din fallback.
Hvis du under denne bruger din css3 property så vil de browsere der forstår det, læse og bruge den - wupti den nye løsning - og de browsere der ikke forstår den ignorerer den og wupti den bruger den løsning som var din fallback.



Fold kodeboks ind/udCSS kode 

Demo : http://netkoder.dk/netkoder/eksempler/eksempel0011.html



Indlæg senest redigeret d. 04.01.2013 22:40 af Bruger #13010
#Scootergrisen: Dit eksempel skalerer ikke korrekt. I hvert fald ikke i Chrome. Bruger du Background-size: cover?

#Csharper: ja men jeg mangler stadig en løsning hvor jeg kan bruge ovenstående CSS3, for at strække baggrunden korrekt (og uden baggrunden er indsat i CSS'en).


I kan se hvad jeg vil her: http://css-tricks.com/perfect-full-page-background-image/



Morten > Mit eksempel strækker billedet helt ud. Kig på den kode jeg skrev eller se kildekoden på demo linket.

Vil du gerne have det sådan men bare at aspect ratioen skal beholdes ?

Hvad er der i vejen med at bruge de eksempler du selv linker til ?
Eller kan du ikke få dem til at virke ?



ja aspect ratioen skal beholdes :)

Problemet med koden er at baggrunden skal være i css'en (background-image: url(/bg.jpg), men jeg har allerede et baggrundsbillede i body, som er over hele sitet. Da nogle sider så er unikke skal jeg ovenpå (eller i stedet for) kunne placere et baggrundsbillede. Jeg ved det kan gøres med jquery, men det renderer ikke helt så hurtigt som CSS3, så foretrækker klart en løsning med det.



Det er ikke noget problem at du har sat baggrunden på forhånd. Det bliver bare overskrevet når du sætter den igen.

Du kan sætte background-size: auto 100%; eller background-size: 100% auto; så behøver den aspect ratio.



Prøvede lige her med din løsning, hvor det er samme problem: http://goo.gl/TuKcN
Dog virker det ikke korrekt :l



Det billede man ser i baggrunden af en kvinde det er fra et img tag.



ja og det er jo det som er problemet. Hvordan ville du ellers ligge et dynamisk billede ind?



Du har måske ikke adgang til alt koden ?

Du skrev bare du have brugt min løsning.

Men både width og height står på 100%. Prøv og sæt den ene til auto.

Men nu giver det ikke så meget mening at bruge de billede som baggrund eftersom man ikke kan se noget af det.



Indlæg senest redigeret d. 07.01.2013 13:03 af Bruger #13010
t