You can set a background image globally for your site in Style View. You can use a small image that will be automatically tiled horizontally and vertically unless you tell it otherwise.
To create an "banner" type of colour or repeating image that is only across the top and expands to the full browser width, you can create a narrow slice and tell it to repeat only horizontally. For example, on the example you mention, the image is 20 pixels wide and 743 pixels tall, and repeated across the page. Like this:
(NOTE: If shifted the white colour a bit to light blue so you can see it against the white background here.)
So create an image with the colour or colour variations you want. Your image doesn't have to be that large. You can make it just a pixel or two wide and the height you want it to be. Then do the following:
Go to Style View in the Graphic display, scroll down to the bottom and click in the area below where is says Page Background.
In the Page Background Properties panel on the right, where is says "Image:" click on the button with the dots [...] and navigate to you image and select it. Typically, at this point, is will be tiled vertically and horizontally to fill the page.
Still in Style View, click on the CSS Code tab.
Scroll until you find the BODY tag.
Depending on whether you started with a copy of an existing site style, or started with a "New Blank Sitestyle", you will see something like this:
HTML Code:
BODY {
background-image: url( "Images/Background.gif" )
}
Or this:
HTML Code:
BODY { background-image : url( "Images\\background.png" );
background-repeat : repeat;
font-family : Open Sans ;
font-size : 14px;
color : rgb(51,51,51);
background-color : rgb(250,250,250)}
You will want to ADD or EDIT the background-repeat tag to read as follows:
background-repeat : repeat-x;
And that should do it. The image you've selected will repeat horizontally to fill the browser window no matter what size it is (or what size your page is.)
How to move a background image?
Reply With Quote
