Make a background image responsive

markjl · October 9, 2013

Hello

I have added a background image which works fine in desktop but not at all in mobile

How can I get the background image to scale? Thanks

Jiten rash (away) · October 9, 2013

is that background image is on whole page i mean body ?

u can have this way

on css img.pring{max-width:100%;}

or define height ,width by various media sizes

Edited October 9, 2013 by Jiten rash (see edit history)

markjl · October 9, 2013

Many thanks Jiten

is that background image is on whole page i mean body ?

Yes its in the body in global.css like this

body{
    background: #ffffff url('../img/numerisation-de-video-fond2.jpg');
}

Should your code

<img class="pring" src="image location" width="" height="" alt="" />
on css img.pring{max-width:100%;}

also go in global css?

Edited October 9, 2013 by markjl (see edit history)

Jiten rash (away) · October 9, 2013

remove that body image from css background: #ffffff url('../img/numerisation-de-video-fond2.jpg');

on ur theme header.tpl add background image and add this at css img.pring{max-width:100%;}

Recommended Posts