How to make background image responsive

[bodie16]

Hi Jason

I have added a background image to my Alyeska site that is essentially a purple band (350pxls deep) aligned underneath the menu bar (using classic menu on stretch setup) to give the look of a broad color band across the page. (you can see the site at vanzwan dot com dot au) Could you please tell me how to get this background image to be responsive with the rest of the site (so it reduces appropriately when the site is seen on mobile devices?
I’d appreciate your advice… thanks.
Wayne

Topic

[Jason Bobich]

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

[bodie16]

OK… thanks very much for your reply and assistance.

cheers
Wayne

[Author]

Replies