Image background in responsive mode

Hi,
I finished my website with the template "StartUp", and It works fine, but in my mobile the image in the background remains big.
I replaced the image in ftp >images > header_bg_mobile.jpg
with the new image in the correct size
but it remains always big.
(Same problem with the tablet)

How can I do?

can you help me?

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hi

I think the only way to do this is by adding this code to override.css (make sure override is enabled in template settings):

Code: Select all

@media only screen and (max-width:767px) {
#gkHeader {
    background: url("../images/header_bg_mobile.jpg") no-repeat scroll center top transparent;
}
}


and move the header_bg_mobile.jpg image to template's /images folder.

Great! Now is perfect
for mobile.

But for the tablet?

thanks a lot

Giuseppe

Hi

If You need for tablet as well than use this code instead and upload a background for it:

Code: Select all

@media only screen and (max-width:1020px) {
#gkHeader {
    background: url("../images/header_bg_tablet.jpg") no-repeat scroll center top transparent;
}
}
@media only screen and (max-width:767px) {
#gkHeader {
    background: url("../images/header_bg_mobile.jpg") no-repeat scroll center top transparent;
}
}


Hi

If You need for tablet as well than use this code instead and upload a background for it:

Code: Select all

@media only screen and (max-width:1020px) {
#gkHeader {
    background: url("../images/header_bg_tablet.jpg") no-repeat scroll center top transparent;
}
}
@media only screen and (max-width:767px) {
#gkHeader {
    background: url("../images/header_bg_mobile.jpg") no-repeat scroll center top transparent;
}
}


NOW IS PERFECT!!
Thanks a lot!!
have a nice day
Giuseppe

Hi

No problem. Glad I could help