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


Tags: javascript,jquery,html,css,web

Problem :

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!



Solution :

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");
}

    CSS Howto..

    How to display line items in twos?

    How to turn on Visual Studio 2010 .css Intellisense on .less file

    How to position div element right below and left-aligned to another div

    How to Set an if in css for opera browser? [duplicate]

    How can I increase the size of twitter bootstrap carousel navigation arrows

    How to create a border with spaces in it [duplicate]

    How to center a text line in a navigation bar?

    css3 pure: how to hover an element outside?

    Bootstrap - How to move styles in HTML to the .css from the example

    How to align vertical elements as horizontal elements and shift to right side of the screen using CSS?

    How to change css image via php depending on weekday

    How to layer a
    element ontop of a other elements

    Jquery not showing select element. No errors in console

    How to set gulp autoprefixer that it will be prefix css when I save my project

    How to 'append' the background with more styles in CSS?

    How to fire a new css animation when the element already has one?

    How to indent text exactly one character width

    How to dynamicaly change css style?

    How to split an HTML paragraph up into its lines of text with JavaScript

    Hide all div element but show first two

    How can I override the CSS ul menu for the JavaScript autocomplete?

    How to confine an animated div to its parent div

    how to prevent datepicker css from changing

    How do I preload non-hardcoded background images with jQuery?

    How do i make my Jittery DropDown Menu stable?

    How do I inline the :before element when unable to include a CSS/style section?

    How to force CSS @media style from JS regardless of screen size?

    Hide one div when showing another with JavaScript

    how to make a div expand to wrap a dynamic content in css

    How to add non-literal into a variable like jQuery?