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 make this rounded shape with css [duplicate]

    when we have a double border in a table , how do we fill in the gap beetween the two borders

    How to change qunit theme / layout

    How do I align this icon while having the input take 100% width?

    How do I keep parentheses of SASS / SCSS mixin?

    how to create bar code like in a horizontal line using css (For Email)

    How do I center a menu option under it's heading option in a drop down menu?

    (CSS) How to position the Div near to the bottom right corner of the browser Relatively to the Browser Size? [closed]

    How to apply common JavaScript and CSS for all my jsp pages in the application?

    How to position my embedded flash file

    How to set full auto width for input tag

    How to stack divs from top to bottom in CSS

    How are CSS properties implemented by different browsers? [closed]

    How to create an interactive image with HTML5, Javascript, DOM and CSS

    How to place several elements in one row when using a list?

    How to make circle thing in CSS? [duplicate]

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    How can I set a CSS property on the html element with jQuery?

    jquery mobile data-filter css styling--how to?

    How to use radio button checked or clicked property in my case

    How to modify css in OpenERP 7?

    How to improve page speed in google? [closed]

    Should I teach CSS layout directly to new learners or should I first teach how to make layout with tables, then table-less layouts?

    How to select all fieldsets in a form except the first one?

    How to create invoice / money reciept with html [closed]

    How do you position CSS elements directly under each other?

    How are the page-break properties in CSS supposed to work?

    How to create a template that will show only in IE6 using javascript?

    Applying new css to elements with jQuery, how to add transition?

    How to Access local CSS file from within Alfresco Javascript?