CODEWITHSUNDEEP
css
Ivo
Ivo

Reputation: 2636

inline css background-size cover

i'm having the following css code 

.imgf{
    background: url(/thatscooking/FotoTC/FotoTC/ALWIN01.JPG) no-repeat center center ; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

thats working as it should now i need to change the img with php so i'm trying to use inline css 

 <div style="background: url(/thatscooking/FotoTC/FotoTC/ALWIN01.JPG) no-repeat center center" 
    style="background-size: cover"
    style="-webkit-background-size: cover" 
    style="-moz-background-size: cover" 
    style="-o-background-size: cover" 
    class="imgf ">
<div id="naamb"><p>Album Naam</p></div></div>

only now is the background-size cover not working and not showing up in firebug

am i using the inline css wrong ?

Upvotes: 6

Views: 23430

Answers (2)

Fred K
Fred K

Reputation: 13910

Use this code, cleaner than @RAS version:

background: url(image.jpg) no-repeat center center / cover;

Upvotes: 23

RAS
RAS

Reputation: 3385

You need to use single style tag. 

<div style="background: url(/thatscooking/FotoTC/FotoTC/ALWIN01.JPG) no-repeat center center;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover; 
            -o-background-size: cover;" 
    class="imgf ">
<div id="naamb"><p>Album Naam</p></div></div>

Upvotes: 11

Related Questions