[jonpettyParticipant]

I hope this makes sense. I want to use a section background image with columns and rows on top of it for content. I don’t want the section background image stretching to the size of the browser window. I’ve used other editirs where you just deselct full width and the background image is in a container.

How do I do that?

Thanks

[jonpettyParticipant]

I added this is the style box for the section and it worked, but maybe this will cause other problems.

max-width: 1175px; margin: 0 auto !important;float: none !important;

Seems like this is pretty standard request to have a container background image with content rows and columns in front of it.

[FriechModerator]

Hi There,

Thanks for writing in! You can limit the width of a section background with the custom CSS below on the section’s STYLE field.

background-size: 80%;

You wrote above:

Seems like this is pretty standard request to have a container background image with content rows and columns in front of it.

Actually, that is how the Section, ROW, and COLUMNS works in Cornerstone. A Section with or without a background image, then a ROW which you can set to have a container or not on top of it. Then the Columns inside the ROW.

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Hope it helps, Cheers!

[jonpettyParticipant]

Thank you fro the reply.

What I want is a background image with rows and columns above that is responsive and is within a section container not full width. Something like a header image (not full width) with background, headline, text and a button above that is responsive.

Maybe there is another way to do that?

My test page is hooktamer.com section Services that has a background image, headline, text, button and gif image above background. I just don’t want a fullwidth section.

The code you provided reduced the background image size, but had a dark full width color behind it and when the browser resized the contents were outside the background image.

The code I used works (see below), but seems like there is a simpler way

max-width: 1175px; margin: 0 auto !important;float: none !important;

[LelyModerator]

Hi There,

Please use percent like below:
max-width: 88%; margin: 0 auto !important;float: none !important;
When you resize the browser, the 1175px max-width will not reach by the browser so it will not be implemented. Using percent means that it is responsive even on smaller screensize.

The graphic image for the feature box are also too large. That will definitely overflow when the browser is resize. Please use smaller image.

Hope this helps.

[Author]

Posts