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.

how to set background content for specific page

Resolved 7 replies customizationthemetheme-vantage
d-_-b
9 years ago · Last reply by Alex S 9 years ago

hi! here is my question.

i want to set an image in the background of a specific woocommerce product page and i want it to stretch and fill the screen if it is a big screen size but i also want it not to shrink past a certain width for mobile and small screens. can this be accomplished through css? is parallaxing a possibility using the page builder image widget somehow?

thank you!
d-_-b

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Alex S Staff 9 years, 11 months ago

    Hi D-_-b,

    It looks like this thread has been handled in another thread by Andrew. If you feel this isn’t the case please tell me and I’ll give you all of the required information to do this.

  2. d-_-b 9 years, 11 months ago

    it was answered on the other thread however i am not sure the question of parallaxing the image was covered. is that possible? also, on the other thread i had also asked about removing the sidebar on a woocommerce product page through css.

    thank you!
    d-_-b

  3. Alex S Staff 9 years, 11 months ago

    Hi D-_-b,

    Parrllaxing isn’t possible without a third party plugin. SiteOrigin can do it, but only if it controls what is generated.

    Every page that is a WooCommerce powered page will a woocommerce class attached to the body. On a product page it also adds a single-product class. So something like this (as an example, this won’t work) could work:

    .single-product .sidebar {
    display: none;
}

    Hopefully, this makes sense.

  4. d-_-b 9 years, 11 months ago

    this does make sense. to make this work i just need to give the code a page id correct?

  5. Alex S Staff 9 years, 11 months ago

    Hi D-_-b,

    I’m not sure I follow. You don’t need to target a page id directly as we’re using the woocommerce classes to do that for us.

  6. d-_-b 9 years, 11 months ago

    hi! let me reset this a bit; i had added more to the conversation with Andrew which i now realize isnt in this thread. my goal is to create a landing page out of a product page in woocommerce. to do this i plan to add a background image and remove the sidebar; all the rest of the product page items will remain with perhaps a little page specific styling. so to your question; i dont wish to remove the sidebar altogether on product pages; just on a specific page.

    so to do this i plan to use this for the background:

    .postid-5421 #main {
    background-color: #dff1ff;
    background-image: url("https://nectarcollector.org/wp-content/uploads/2015/02/nc_15-02_web_bck01.jpg");
    background-size: cover;
}

    and for the sidebar this you provided but adding the post id:

    .postid-5421 .single-product .sidebar {
    display: none;
}

    does this appear as though it will work?

    thanks again for your time!
    d-_-b

  7. Alex S Staff 9 years, 11 months ago

    Hi D-_-b,

    That won’t work. .postid-5421 .single-product are applied to the same element so if you want to check if they are both attached to the body you’ll have to remove the space.

    With that said, there’s little need to check if it’s a single-product if you’re targeting via the postid class.

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