Home>Support>Site-wide background CSS options

Site-wide background CSS options

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Specifically, I’m trying to get my background to stretch horizontally and repeat vertically (at least I think that’s what I want). I found this post: https://stackoverflow.com/questions/41025630/css-background-image-stretch-horizontally-and-repeat-vertically/41025660 and would like to follow its advice, but I’m ot sure exactly how. I think I need to go to Appearence –> Custom CSS, but I have seen a few other places for CSS. In any case, what I seem to be missing is the right class name for the CSS, but that’s actually an educated guess. Anyone help out? I know there’s YAPI, but I’m trying to avoid that….

Also, my first title was too long and it looked like it ate my post. Fortunately I hit the Back button and got it back, but might want o look into that from a UI perspective

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

  1. 6 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi Steven

    Thanks for posting. You can add your CSS to either AppearanceCustom CSS for SiteOrigin CSS or to CustomizeAdditional CSS if you just want to use the core WordPress Custom CSS field.

    The selector to use depends on your theme. You can try use body.

    body {
        /* Insert your declarations here. */
    }
  2. 6 years, 9 months ago Steven Brown

    Thanks, I actually figured it out; I needed the #main selector. But now I just realized that one key piece of behavior is not actually happening. I am using

    #main {background-size: 100% auto; background-repeat: repeat-y;}

    and I want at least 1 full copy of the background to display, no matter what. Even if there’s just a single line of text on the main section, I want the background to push it to expand to accommodate the entire background. Do you know how to do this?

  3. 6 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Glad to hear you’ve made progress. The background property can’t do that, you’d either need to set a minimum height for the #main selector or use JavaScript to set the height. Min height is the easiest.

  4. 6 years, 9 months ago Steven Brown

    I tried setting min-height:100% for #main, it seemed to do nothing though. Does it have to be a constant height, like a number of pixels? Can I make it dependent on the screen height?

  5. 6 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    100% won’t work for min-height. If you want the quick and easy way of doing this, you’d need to set a static pixel height. Dependent on the screen height would require JavaScript to measure the viewport first.

    Hope that helps :)

  6. 6 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Alex let me know you’re using SiteOrigin Premium and he helped out via email. He mentioned he’s sent a snippet that’ll do the job. Great stuff :) For any follow-ups, please email. Alex will attend ASAP. We help all of our premium users via email for the best possible response times. Thanks for your support.

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