How To Give Individual Pages Their Own Separate Background
What This Is For
Using the appearance options to add a background image to your site adds the background image to each page of your site as a whole. There may be times when you want a certain page to have a background that is different from the rest of your site's pages. That is where this article comes into play. You can style pages individually using just a little bit of css and html. Knowledge of css and html is not really needed, but does help. Later in the article, you should find the coding you need, and you can simply copy and paste it as instructed.
The Basics
There really isn't a lot of html required to put unique backgrounds on separate pages. The extent of what you'll need when it comes to the html is this:
<style> This an opening style tag, and used to start the Css code so to speak.
All of your Css will always go between the opening and closing tags when you are applying Css to html directly.
</style> This is the closing style tag, and it is used when you are done with your Css.
How To Make It Work
Firstly you will need to go to the page that you want to give a unique background. It has to be a page that you are able to add an element to. You'll need to add the html code box element to that page. You can add the html code box element by clicking on manage site, the add element button, and then select the html code box element.
Once you've added your html code box element, you'll then place your beginning and ending style tags. You'll put the Css you need in between them as mentioned before. Example below:
<style type="text/css">
body {background-image: url(http://www.yoursite.spruz.com/YOURIMAGE);}
</style>
Here is a brief explanation of what you see above. The "body" referred to in the Css between the opening and closing style tags encases your entire website. Everything else on your pages are contained within the body. That being said, it's where your background image goes. "Background-image" is fairly straight forward and it references exactly what is says.
Now for the only moderately tricky part. You will need to pick the image you want to use for your background. Once you've done this, you'll add it to your file manager by clicking on manage site, your site, file manager, click the upload file button, select your image and upload it, and "then" you'll click on the file within the file manager. That will bring up a box with some info and options. You'll see the box that contains the files url location. You'll need to copy that url. It is what goes in the code below in place of the text I've highlighted in gray. Be sure to only remove what I've highlighted in gray, and then add your images url in place of the one highlighted below.
<style type="text/css">
body {background-image: url(http://www.yoursite.spruz.com/background.jpg);}
</style>
Once you've clicked save on the element, you should now see your unique background for the page.
Getting A Bit More Advanced
What we've done so far does serve it's general purpose, but in different scenarios you may need something more. For example, the code we have so far does display the image, but it will repeat. You may not want it to repeat. Often times not in fact, so you'd use this instead:
<style type="text/css">
body {background-image: url(http://www.yoursite.spruz.com/background.jpg); background-repeat: no-repeat;}
</style>
You may only want your background image to repeat horizontally aka "left to right":
<style type="text/css">
body {background-image: url(http://www.yoursite.spruz.com/background.jpg); background-repeat: repeat-x;}
</style>
The code below makes the background repeat vertically aka "up and down":
<style type="text/css">
body {background-image: url(http://www.yoursite.spruz.com/background.jpg); background-repeat: repeat-y;}
</style>
Extended Usage
In addition to using this method on pages that use elements, you can also add these codes to your site's content templates. This is done by clicking on manage site, settings, content templates. Then on the right, you will see some text with the link "here" in it. Click "here". Click on each of those files and then click "edit" to view the contents and add your own. Within the contents, you can add the codes above to add a background to your login page, register page, and more.
This same method can also be shared with your members. They can put this in their profiles text box app and apply their own full background image to just their profile. If they know css well enough, they can create some pretty extensive designs for their profiles, much like many remember on Myspace.
Enjoy!
| Author: | Randy |
| Published: | Apr 6th 2012 |
| Modified: | Apr 6th 2012 |