Responsive Header Image - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
June 24, 2014 at 5:37 pm #283144

blueunderground
Participant

Hello,

I am working trying to make the header image in http://theboardhound.com/next/ responsive without success.

Above 767 pixels the header image should remain as it is, displaying http://theboardhound.com/next/wp-content/uploads/2014/06/the-board-hound-shirlington-9-no-shadow.png.

But below 768 pixels, I would like for the header image to replace that image to display http://theboardhound.com/next/wp-content/uploads/2014/06/the-board-hound-shirlington-9-no-shadow-no-dog.png.

I have tried the following css to change the image displayed below 768 pixels without success:

media=”all”
@media only screen and (max-width: 767px)
.header_color {
background: #ffffff url(http://theboardhound.com/next/wp-content/uploads/2014/06/the-board-hound-shirlington-9-no-shadow-no-dog.png) top right no-repeat scroll !important;
}

Any advice would be appreciated.

Thanks!

June 24, 2014 at 9:48 pm #283259
Yigit
Keymaster
Hey blueunderground!

Please add following code to Quick CSS as well
```
@media only screen and (max-width: 767px) {
.responsive #top #header {
height: 166px;
}}
```
Best regards,
Yigit
June 24, 2014 at 9:59 pm #283269

blueunderground
Participant

Hi Yigit,

I am not trying to maintain the same height for the header , which is what the code you sent me does. Rather, I am trying to swap one image for another when the width of the browser window drops below 768 pixels wide.

Please advise.

Thanks!

June 25, 2014 at 4:36 am #283394
Ismael
Moderator
Hey!

Thank you for the info.

Please use this one:
```
@media only screen and (max-width: 767px) {
.header_color .header_bg {
background: #ffffff url(https://theboardhound.com/next/wp-content/uploads/2014/06/the-board-hound-shirlington-9-no-shadow-no-dog.png) top right repeat scroll;
}
}
```
Regards,
Ismael
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.