CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
cheng
cheng

Reputation: 1324

How to implement multiple background-images for an id / class with the same CSS code?

so I have a banner id for my website that goes like this for one of my pages

#photo-banner {
    background-attachment: scroll, fixed;
    background-color: #645862;
    background-image: url("images/overlay.png"), url("../images/banner3.jpg");
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    color: white;
    padding: 7em 4.5em 3em 4.5em;
    text-align: center;
}

The id attributes to a element in the HTML.

However, this only works for one page. If I wanted to make another page with a different background image with the same other settings, as far as I know, I would need to make another id for that.

I'm thinking there's a way with JS / jQuery to change out the background-image in the HTML file rather than the CSS file to save a lot of code writing.

Or if there's another more optimal way, I would greatly appreciate that too, thanks!

Upvotes: 0

Views: 652

Answers (1)

Turnip
Turnip

Reputation: 36632

On page two give the element a class and use this to override your current CSS. All the rest of your CSS can stay the same and will be re-used :

#photo-banner { /* this will apply to page 1 and page 2 */
    background-attachment: scroll, fixed;
    background-color: #645862;
    background-image: url("images/overlay.png"), url("../images/banner3.jpg");
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    color: white;
    padding: 7em 4.5em 3em 4.5em;
    text-align: center;
}

#photo-banner.page-two { /* this will apply to page two only */
   background-image: url(some-other-image.png), url(some-other-image.png");
}

Upvotes: 3

Related Questions