Reduce Image Size (scale) for screens

It’s kind of already set that way, but since some background images are designed differently (different widths, different heights) you would probably have to add in custom modifications depending on the size of those images.

You can look near the bottom of the css to see the responsive section. Here’s what you could copy and adjust –

@media only screen and (max-width: 760px) {

	.front-page-1,
	.front-page-4,
	.front-page-6 {
		/*background-attachment: scroll;*/
		-webkit-background-size: cover;
		-moz-background-size:    cover;
		background-size:         cover;
	}

}

In that example I changed the background size from auto to cover. You can use contain, cover, and auto to have the image adjust on different browser sizes. This is what all other sites use to make background images responsive. The browsers job is to scale the image without distorting it….the best it can. There are still limits though, not every image is going to show 100% width and 100% height from end to end. It really just depends on the type of image.

You can copy/paste that code and make any more adjustments you need to it, as well as change the browser width 760px to other screen sizes.