This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Site-wide background CSS options

Open 6 replies customizationpluginplugin-siteorigin-css
Steven Brown
7 years ago · Last reply by Andrew Misplon 7 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Andrew Misplon Staff 7 years, 4 months ago

    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. Steven Brown 7 years, 4 months ago

    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. Andrew Misplon Staff 7 years, 4 months ago

    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. Steven Brown 7 years, 4 months ago

    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. Andrew Misplon Staff 7 years, 4 months ago

    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. Andrew Misplon Staff 7 years, 4 months ago

    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.

Have a different question or issue?

Start New Thread