Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Different background images on each page

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #166504
    barrygryllz
    Participant

    New to CSS, so please bear with me. Using Squarespace and trying to set a different background image for each page on my site – I used this code:
    html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    It worked but only as a global control, and set the same background image for all pages.
    Anyone know of a way to set different background image for each page?

    #166509
    Alen
    Participant

    Create a .class that get’s added to the body/html element depending on what page you’re on. I’m not sure how Squarespace handles templeting but essentially you would:

    /* sets base style for each page */
    html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    
    /* set background image per page */
    .home-bg {
    background: url(images/home-bg.jpg) no-repeat center center fixed;
    }
    .about-bg {
    background: url(images/about.bg.jpg) no-repeat center center fixed;
    }
    .contact-bg {
    background: url(images/contact-bg.jpg) no-repeat center center fixed;
    }
    

    So in your HTML you would have this on home page:

    <html class="home-bg">

    For about page:

    <html class="about-bg">

    For contact page:

    <html class="contact-bg">

    Hope that helps,
    -Alen

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.