Backround Image in Section Zoom Error

[detailsguy]

Hi there,

Having a problem with background images in Pro. I’m trying to get a fixed background image that looks like this, with a transparent column sitting over the image that resizes properly on different screen sizes: http://u2k.db4.myftpupload.com/guidelines-and-tips/

In the above example I used Wordpress settings to accomplish this, setting the background image there and then doing the rest of the work in Pro.

The problem is that when I do this, I have to make sure that the page layout is set to “No Container” which means that in the theme appearance settings, I can’t set a max-width for the site and at 1700px I want the main content on the site to stop expanding and to simply have a black background on the left/right sides of the page beyond the 1700px.

I’ve set that up on this page: http://u2k.db4.myftpupload.com/layout-demo/ but the problem here is that rather than setting the background image to the size of the viewfinder and then fixing it in place, it blows up the background image to cover the entire length of the section and so that fix doesn’t work. My guess is that I need to use the original background property in the Wordpress page but then add some CSS to specify a max width and a black background beyond that width but can’t sort it.

I’ve attached a photo of the look I’m trying to accomplish once the site expands beyond the max-width of 1700px.

Any solutions you have would be much appreciated…

[friech]

Hi There,

Please add this to Theme Options > CSS

@media (min-width: 1701px) {
	.backstretch {background-color: #000;}
	.backstretch img {
	left: 50% !important;
	-webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    max-width: calc(1700px + 4em) !important;
	}
}

This will limit your background-image size to 1700px (+ 4em) on screen width 1701px and above.

Your Row will look unaligned though, that is because of the custom margin you applied to it.

Please update that media query of yours to not affect the screen width 1700px and above.

Hope it helps,
Cheers!

[detailsguy]

Great! That looks like it will indeed work to create a black background beyond a 1700px screen width, so thank you for the fix and the quick response.

One additional question about the column: If I wanted to keep it in the same place it is at a 1700px screen width in relationship to the background with the image, do you have a suggestion about how to do that as the screen enlarges passed 1700px?

Basically if I could contain the main content area, the content inside, the header, and the footer at the 1700px size and just have the black background beyond that, that would be ideal. But if that’s too complex, just keeping that column in roughly the same place in relationship to the photo background is totally sufficient.

I adjusted the media query you mentioned to max out at 1700 px.

[christopher]

Hi there,

You can limit the maximum width of the header if you go to the Bar that you added the header and set the maximum width option there:

If you need additional help I suggest that you open up a separate thread and give us more detailed information about the case and login information in a secure note to be able of a help.

Thank you.