Archived topic

Header Background + Mobile

1 reply · Started by Anonymous on June 16, 2015

Viewing posts 1–2 of 2

June 16, 2015 at 1:49 am #114870

Hi !!!!

I use this code in the style.css of Mantle.

.site-header {
      background-image: url('http://www.mysite.com/v2/wp-content/uploads/2015/06/TEST-Home-Page-V2.png');
height: 299px;
}

But, when I use the mobile version the png is too big (1400X300).
How i can resize the background png size auto, if i use an iphone or an ipda ?

Thank you....

June 16, 2015 at 8:39 am #114933

Background images on mobile are kind of a pain.

You're better off applying a different image suited for mobile when on smaller devices.

For example:

@media (max-width:767px) {
      .site-header {
            background-image: url('URL TO MOBILE IMAGE');
      }
}

Also, since you're using a child theme we release updates to, I suggest you use methods #2 or #3 to add your CSS: http://generatepress.com/knowledgebase/adding-css/

This archived topic is closed to new replies.