Change main image

Hi

I'm new to Gavick Themes and would like to change the main background image. What is the best and simplest way to do this and be future proof against theme updates.

From what I can gather the image change should be written in the override.CSS file..?

If so, then my question is how do I change the main background image in the override CSS to work with all 3 responsive layouts

I understand how to change the main image on PC layout, e.g.

#gkHeader.nobg {
background: transparent url(www.mysite/images/my big picture.jpg') no-repeat center top;
min-height: 760px;
}

but how do I specify the image for mobile and tablet layout?

Hello,

You can use media queries for it i.e.:

Code: Select all

@media (max-width: 1040px) { /* for tablets */
   #gkHeader.nobg {
      background-image: X;
   }
}

@media (max-width: 600px) { /* for smartphones */
   #gkHeader.nobg {
      background-image: X;
   }
}


Would this be correct?

#gkHeader.nobg {
background: transparent url(http://www.mysite/images/header_bg.jpg') no-repeat center top;
min-height: 760px;
}

@media (max-width: 1280px) { /* for tablets */
#gkHeader.nobg {
background: transparent url(http://www.mysite/images/header_bg_tablet.jpg') no-repeat center top;
min-height: 575px;
}

@media (max-width: 720px) { /* for smartphones */
#gkHeader.nobg {
background: transparent url(http://www.mysite/images/header_bg_mobile.jpg') no-repeat center top;
min-height: 325px;
}

It seems to be ok, if the images won't be overrided you can try to add !important.