Good Design: Using an image as your background
We’ve had some good feedback about our post on centering your page content vs. left-justifying it. Kevin, JP and Andy have commented on the effects of centering when using an image as a background. I thought the answer might be worth sharing with the rest of you.
There’s an important thing to keep in mind when you are designing your page, and that’s the idea of “tiling”. You may be familiar with the concept from adjusting the background on your Windows desktop. When the image chosen is smaller than the background it needs to fill, it automatically multiplies to fill the space with enough identical copies of itself to fill the background. The finished background looks like it is made up of rows of tiles with your image on them, laid side by side.
Tiling is the default for Homestead SiteBuilder and SiteBuilder Lite. Patterns provided by Homestead are designed to look good when tiled to make up a full background, but most other images really aren’t suitable for that use.
There is, however, an easy way to use one of your images as the background on your page and have it look great: set your background to a solid color, and drop in your image as an Element in the center of your page. Remember, your page is like a collage, with each Element layered on top of the preceding one. If you choose a matching or complementary color to the background of your image, your image will float in the center as if it were framed there.
Here’s how to go about it using SiteBuilder:
1) Click the Page Info button on the top toolbar; the Page Properties Editor will appear on the right hand side.
2) Under Background, select color and make your choice in the drop-down menu to its right. If you want to try a pattern, select pattern and then choose which one in the same way.
3) Now place the image you want to use as a background onto your page. Click the Image Element button, the one at the top next to the Text button. When you mouse over it it will say “Add an Imported Image Element”. Select your image and place it exactly where you want it to appear relative to everything else.
4) To make your image recede into the background so your other Elements appear on top of it, right-click on it and select Element Layer Order. Then select Send to Back. Your image will now be your bottom-most layer.
To see an example of an image floated in the center of a solid color background, check out this page I made. The page itself is center-aligned. No matter what size of display is used to view it, your content will be centered.
Here’s one more example of this that you can check out.
Now compare that to a page with the same image used as the background. The background image has tiled to fit the browser window, and the content is difficult to read.
There is a similar problem if the page is left-aligned.
For advanced users who would still prefer to use their image as a background, and have it completely centered within the browser, it can be done with CSS in the head tag, using the “background-position” and “background-repeat” properties. Take a look at this page to see an example of how this would look. I wouldn’t try this unless you are familiar with CSS, but to center your image as the background on your page without tiling, copy the following bit of code:
<style type=”text/css”>
body
{
background-image: url(image.jpg);
background-position: center center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
</style>
Then follow these steps:
1) In SiteBuilder, click the Page Info button.
2) In Page Properties, remove any background image and make the background a solid color.
3) Switch to the Advanced tab.
4) Paste the CSS code you copied to the <HEAD> Tag section. Make sure to replace “image.jpg” with your real image name.
5) Save and publish the page.
The background unfortunately won’t show up on the stage or in preview, but it will show up on the published page. (Note, you can replace “center center” with another location - for example “top right” to have your image appear in the upper right corner of the browser)
Unfortunately, CSS can’t stretch the image to fill the entire screen. That can be done with custom Javascript but it takes a bit of work and there are some issues with it. Customers who don’t have Javascript turned on won’t see the background image and the solution only works for customers that are using certain browsers (e.g. Firefox 2.0). If your customers are using an older browser it often won’t work very well. If you really want to try this out, take a look at this example page - complete with instructions.
Hope this helps, let us know if you have comments or questions!
Rochelle
August 18, 2007 at 11:47 am
Good Info…Just to add some additional ways to design your site to give you more flexibility in design.
There is also a very simple way to have a colored background or a patterned background, with your site centered, and the interior of the web site a color of your choice. As an example on my site I chose the color white and a custom color for the menu. I did this just using the rectangle element and the format tool. Example here: http://www.rogerphilpot.com
November 21, 2007 at 1:51 pm
this isnt very good design
December 5, 2007 at 4:56 pm
Great!
Regards,
CMS,
Sergio’s World Beers
Email : generalmailbox@sergiosworldbeers.com
http://sergiosworldbeers.com
April 8, 2008 at 8:31 pm
Hey, I was wondering if anyone knew how to do the same sort of thing with java script, but make it so it dynamically fills the background, like when you use the “fill” setting when you change your desktop;
so it cuts a bit off of the top and bottom / or the sides (depending on the image size, browser size)…
heres a really good example…
http://ringvemedia.com/
thanks