RapidWeaver FAQ - Background







Share/Bookmark


Where can I change the background? How can I set an image which adapts to the window-size as the background and make it static or fixed?


Chapter 1: Setting the background
Chapter 2: Having a background-image adapting to the window-size and making it static
Chapter 3: Background slideshow



Chapter 1: Setting the background


On a website there are mainly two backgrounds. The browser background you find left and right of the content and the page background which is the background of the content part.

You may be able to change these under Page Info, Styles. If you're not able to do so there is always the possibility to do it using codes.

Browser background

To control the browser background post the following code under Page Info, Header, CSS:

body {
background-color: #cccccc;
background-image:url('URL to the image');
background-repeat:no-repeat;
}


In the first line you can define the color of the background. In the second line you can define an image for the background. In the third line whether you want it to repeat or not. If you don't want an image just leave '' empty. Have a look at the Basic HTML Codes knowledge FAQ for more informations.

Depending on the theme it may not be enough. With the theme I use I get a stripe at the top which I had to remove by adding:

#top_grad {
background: transparent;
}


Page background

To control the page background post the following code under Page Info, Header, CSS:

#container {
background-color: transparent;
background-image:url('http://rapidweaverfaq.org/media/trans_background.png');
background-repeat:repeat;
}


In the first line you can define the color of the background. In the second line you can define an image for the background. In the third line whether you want it to repeat or not. If you don't want an image just leave '' empty. Have a look at the Basic HTML Codes knowledge FAQ for more informations.

In the code above I've set the color to transparent and used a semi-transparent white image (80% opacity) as the page background for the browser background to shine through while keeping good readability. The image with 80% opacity (10x10px) was made with an image editor and saved as .png to preserve transparency.


Chapter 2: Having a background-image adapting to the window-size and making it static


To achieve that use this code:

body {
background-color: transparent;
background-image:url('URL to the image');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size: 100%;
}


This page is a sample of this. You can see that the background sticks in place and doesn't move when scrolling down the page and that it resizes if you resize the window.


Chapter 3: Background slideshow


If you want to set a slideshow as the background of your page have a look at
this page instead.



This FAQ is also discussed in my RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -


Now share it…

Share