CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vicR
vicR

Reputation: 819

Multiple background images

I want/need to assign a different background-image to different html-pages meaning

index.html -> background-image: index.jpg
about.html -> background-image: something.jpg
...and so on

Therefore I wanted to ask whats the best approach for this, the backgrounds a specific for it's certain page NOT random. Is there a way in CSS or JavaScript or even somehow. For now I set the background for each page in the html-file 

<body style="background-image:..." >...

Thanks for any help or ideas.

Upvotes: 0

Views: 61

Answers (1)

GolezTrol
GolezTrol

Reputation: 116100

You can add a class to the html or the body tag.

html:

<html class="page-type-about">
<body>

And in your CSS you can specify the background depending on that class. I would also add a default. That way, you only need to specify a different image for those pages that have a different-than-default background image.

body {
  background-image: url(default-image.png);
}

.page-type-about body {
  background-image: url(about-page-image.png);
}

Upvotes: 3

Related Questions