Changing backgrounds for each page

Author Message

Posted: 7/16/2012
Quote message 

I was wondering if there was a way I could give each page in my website a 'different' background. It seems that once a background is selected that it remains constant for all subsequent pages. This particular website I'm working needs to have a different background for each page. Is there an easy way to do this?



Posted: 7/16/2012
Quote message 

Hey Jenny

I created a quick HTML site with different backgrounds for each menu item.
I assume this is what you are trying to accomplish. The images are a little big so it may load slow. This took less than 5 mins.

What you want to do is create your template fully. After complete edit each page. This is the code that needs to be inserted in the head tags.

<style type="text/css">
body {background-image:url("images/page1.jpg");}

I do this with each page and change the image name.

<style type="text/css">
body {background-image:url("images/page2.jpg");}

You can see an example here:


Posted: 7/20/2012
Quote message 

Jenny, I'd be more than happy to help. Just let me know what I can do for you to get this website up.

Posted: 2/18/2013
Quote message 

@stoneman - Finally found the artx and pdf. Give me a shout at
jrgweb@gmail dot com

Posted: 5/12/2014
Quote message 

Quote jrgweb:

@nellie73 -
I re-activated the url which shows one way to achieve random background images.

Just right click and you will see the script that performs the background. At the bottom of the page is also a script.

Another way of doing this in artisteer4 is simply add your background image to your page. Then when exported go to page2, page3 and page4 and insert something like this in the <head>...</head>

<style type="text/css">
body {background-image:url("images/page1.jpg") !important;}
#art-main {background:none;}

do this with each page that you want to change the background from the original.

here is an example:

Most individuals here don't like editing after export. If this is the case for you and you know a little about jquery/jscript you could write a script to change this automatically and insert the script in to the footer. :-)

Anyway, hope this helps. Let me know if I can be further assistance.

8-) 8-)

Posted: 6/20/2014
Quote message 

I get it to work on the first page, but not in the other menu items.

Anyone a suggestion?

Posted: 6/24/2014
Quote message 


Sorry that wasn't the solution.
The image works on the first opening-page, but not on the other. So there should be an other issue.

Hope you got any other ideas.
daphne talbot

Posted: 8/17/2018
Quote message 


I figured this out and wanted to share. This worked for me. Don't ask any questions :) because I simply hacked my way into this. Spent hours doing it so here you go:

#art-main{background:none; }
.page{background:none !important; }

.page-id-63 #art-main {background-image: url('/wp-content/uploads/2018/08/water.jpg');background-color: hsla(0,0%,100%,0.9); background-blend-mode: overlay;background-size:cover !important; background-attachment: fixed;}

This is after the site has been loaded into Wordpress. The .page-id-63 is unique to the page. View the page source code and look in the body tag for the page id.

Hope this helps someone save time!