[Resolved] Header Background + Mobile

[Jamyz]

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….

[Tom]

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/

[Author]

Posts