Need CSS help for responsive background in Hero Theme

charlesdibisceglie · Member · Aug 27, 2014 at 1:57 am
Copy link

Add topic to favorites
The theme I am using is Hero, my background image is currently 1500 px wide by 1000 high. Though the background displays fine on my desktop it does not display properly when viewed on a laptop or IPad. Is there a way to make the background image responsive in CSS to correct this problem? For designing purposes what dimensions are recommended and approx. how much of the image will display unobstructed on each side of the page?

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Aug 27, 2014 at 1:50 pm
Copy link
The background image is applied to the body element in your theme. This means that when viewed on a fair sized desktop screen the image apears at each side of the main content section of your site. However when viewed on a tablet or smartphone the content section is basically the same width as the screen, meaning there’s no space at either side for the image to appear in.

Because screen size is at a premium on these devices I wouldn’t recommend making the content area skinnier in order to show the background image, but it is possible.
designsimply · Member · Sep 29, 2014 at 3:35 pm
Copy link
I reviewed the CSS for the Hero theme and I found that the theme is intentionally designed to hide the header image on screen sizes smaller than 620px using a media query rule like this:
```
@media screen and (max-width:620px) {
	.header-image {
		display: none;
	}
}
```
Here is more information about how media queries work in case you’re not familiar with them:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/

The CSS above applies to the header image if you have uploaded it through the Appearance > Customize > Header section in your blog dashboard. If you’ve done something separate with custom CSS, then we’d need to look at a different solution.

Is there a way to make the background image responsive in CSS to correct this problem?

You can undo the small screen image size with a similar media query to the one shown above but set display to block instead of none. Here is an example you can try out:
```
@media screen and (max-width:620px) {
	.header-image {
		display: block;
	}
}
```

No items found.