Changing backgrounds for each page


Author Message
jennyfedei

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?

Thanks!

Jenny
 
jrgweb

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.

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

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

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

You can see an example here:

http://jrgweb.net/mybackground/index.html

 
Garry

Posted: 7/19/2012
Quote message 

Simply open each page of your site in an HTML editor, insert the styles suggested by "jrgweb" in header section and upload the new background images.
 
jrgweb

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.
 
stoneman

Posted: 2/18/2013
Quote message 

Quote jrgweb:

Good morning Jenny,

Addition instructions:

http://jrgweb.net/mybackground/Jenny_HTML.pdf

hey jrgweb, just wondering if you still had the instructions as they are no longer available at the web url you provided. Also, I have added the tags in the <head> element but what/where was the function that actually causes the image to resize to the browser window? Can't seem to find anything out there except a jquery script that does this, but I know it's possible with CSS3. I'm using Artisteer 4.0 btw.

Thanks!
 
jrgweb

Posted: 2/18/2013
Quote message 

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

Posted: 3/11/2013
Quote message 

@nellie73 -
I re-activated the url which shows one way to achieve random background images.
http://jrgweb.net/mybackground/index.html

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;}
</style>

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

here is an example:

http://demo.artisteertoday.com/mybackground2/

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.
 
debohf12

Posted: 4/3/2013
Quote message 

I created 2 pages in a template, each with different content, block structure, style. Now, when I create a 3rd page, it's effectiely copying page 2, and any changes I make to page 3 (deleting a block, changing content of a block, etc.) changes page 2. No idea what's going on, or why creating pages 1 and 2 went ok with different blocks. Any help greatly appreciated.
 
Mounir

Posted: 8/12/2013
Quote message 

can u do a quick tutorial please ?
 
Ruston

Posted: 5/12/2014
Quote message 

Quote jrgweb:

@nellie73 -
I re-activated the url which shows one way to achieve random background images.
http://jrgweb.net/mybackground/index.html

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;}
</style>

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

here is an example:

http://demo.artisteertoday.com/mybackground2/

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-)
 
Michiel

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?
 
Michiel

Posted: 6/23/2014
Quote message 

@jrgweb

It's working on: http://31.25.102.151/~levensbrn/
Not working on: http://31.25.102.151/~levensbrn/index.php/organisatie/pastoraal-team

With exact the same code in the article:
<style type="text/css">
body {background-image:url("images/kerk-links_small.png") !important; background-repeat:no-repeat;}
#art-main {background:none;}
</style>

It's a Joomla site.

Any help would be appreciated.
 
Michiel

Posted: 6/24/2014
Quote message 

@jrgweb

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 

Hi,

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!