This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Reply To: How to make background image responsive

#1878
Jason Bobich
Keymaster

Hello Wayne,

Could you please tell me how to get this background image to be responsive with the rest of the site?

With the way you’re doing that, it’s not really going to be easily achievable. In CSS, a background image can’t really be responsive in a way that you can really work with. You can set the background-size to use percentages, which will make it somewhat responsive, but this isn’t going to solve your problem.

Instead, you should think of a different approach. For example, I’d just remove the background image all together from the body of the page, and focus on the sections that stretch horizontally across the entire page. And with your design you really don’t need any images at all.

body {
	background: #fff;
}
#wrapper {
	background-color: transparent;
	background-image: none;
}
#top {
	border-top: 5px solid #000;
}
#main {
	background: #513e54;
}

On a sidenote, I see you’re making a lot of customizations. You really should be using a Child theme. It will make your life a whole lot easier. Checkout this video: https://vimeo.com/41331677