Home>Support>How to set max width for a background image in a row?

How to set max width for a background image in a row?

By Kasra Yousefi, 7 years ago. Last reply by Alex S, 7 years ago.

Hi There,

I have full-width rows with background images set to “cover” on the following page:

http://www.bigbossgroove.com.au/en/index.php/band/

Now if you check the following on a desktop browser with a large screen (w>1280), you will notice that if you maximize the window to expand to the full screen, background images stretch to the extent that faces are not completely visible.

How can I set a maximum with for the rows (or the entire container), so it only scales up to an extent and stops there?

Thank you very much in advance,
K

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Kasra,

    This is tricky as the row layout you’re using (full width stretched) is designed to break the theme’s container. Hm. Would you be okay with changing row layout back to standard for each of rows and increase the container width itself to be a maximum width of 1280, without padding?

  2. 7 years, 4 months ago Kasra Yousefi

    Hi Alex,

    First, many thanks for helping me with this.
    I'm trying your suggestion now. Obviously, I can easily switch the row layout back to standard, which I did in a test page. But exactly which CSS class I should set for the container to be 1280px? and is there anything else you suggest I should add, in addition to setting the width property?

    Thank you very much in advance,
    Kasra

  3. 7 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Kasra,

    You can change the container of your theme with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:

    Just the test page:

    .page-id-823 .site-inner, .page-id-823 .wrap {
	width: 100% !important;
	max-width: 1280px;
}

    Globally change the container width:

    .site-inner, .wrap {
	width: 100% !important;
	max-width: 1280px;
}

    You might also need to install the SiteOrigin CSS Editor.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More