CODEWITHSUNDEEP
cssbackground
Ridz
Ridz

Reputation: 407

Dynamically change background of a div in css

This is an example of code in CSS:

  block {
        margin-left: 1in;
        margin-top; 1in;
        position: absolute;
        background-image: url('../images/myimage.png');
        background-size: 100% 100%;
    }

Now I am using this CSS file on more than one HTML page and there need to be able to change this image per page. Maybe through HTML?

<block><somehowchangeimagehere></somehowchangeimagehere></block>

? Please, only HTML & CSS.

Upvotes: 2

Views: 2919

Answers (3)

Stefan
Stefan

Reputation: 3041

If you insert something like this in your html after you include the stylesheet you can override the stylesheet:

<style type="text/css">
    block {
        background-image('some_image_thats_specific_to_the_page');
    }
</style>

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

One way to handle this is to put a class on the BODY tag for each page, then make different subclasses:

<body class="pageOne">

CSS:

.pageOne block {
    background-image: url('../images/myimageOne.png');
}

.pageTwo block {
    background-image: url('../images/myimageTwo.png');
}

Upvotes: 2

Lily Ballard
Lily Ballard

Reputation: 185671

The image URL is relative to the CSS page URL, not the HTML page URL. It should just work.

Upvotes: 0

Related Questions