Custom background image on one page

  • Resolved glawholesale

    (@glawholesale)


    5 years, 8 months ago

    Hi there,

    I am looking for a solution to my custom CSS section. I am trying to get a custom background for my homepage because my background is my logo and my logo is already on my home page anyways.

    I currently have this as my CSS so my background will be fixed on mobile devices as well.
    body:before {
    content: “”;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: url(https://the-rns.us/wp-content/uploads/2019/03/otherbg.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    }

    When I go to set my background using my custom page id it does not change anything.

    Any suggestions?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    Any reason why you’re not just doing this?:

    body {
    background: url(https://the-rns.us/wp-content/uploads/2019/03/otherbg.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

    Then you could overwrite the image like this:

    body.page-id-10 {
    background-image: url('URL TO YOUR OTHER IMAGE');
}

    You’d just need to update 10 with the page ID.

    Let me know ??

    Thread Starter glawholesale

    (@glawholesale)

    Hey Tom,

    The only reason I’m not doing that is because its not responsive on mobile for IOS, the background image isn’t fixed.

    Theme Author Tom

    (@edge22)

    Got it. In that case, you would use this:

    body.page-id-10:before {
    background-image: url(URL TO IMAGE);
}
    Thread Starter glawholesale

    (@glawholesale)

    Thank you so much Tom! This worked, you rock.

    Theme Author Tom

    (@edge22)

    Glad I could help ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom background image on one page’ is closed to new replies.