Tutorial: Page (1) of 1 - 05/27/05 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Using CSS to Control Background

Using cascading style sheets to set static background image By David James Rockingham III

With the more recent web browser releases, cascading style sheets are becoming more accepted which will make many web designers very happy. For years, designers had to create elaborate website layouts using borderless tables, transparent spacer images or just basic HTML code. Cascading style sheets can not only make your website look better, it will make it easier to manage as well.

One cool design technique being utilized on the internet is the no scroll background. Over the years, people have become used to tiled backgrounds scrolling along with your web page movements or the use of a single color background. With a few lines of CSS code and a background image, you can create a nice background that stays static while you scroll through a website.

With a basic image editing program, you can also create a no scroll background for your website quick and easy. First, create a new file with the dimensions of 1000 pixels wide and 500 pixels in height. This is a good sized image that should work well as a static background. You should also be aware that web design programs like Macromedia Dreamweaver offer CSS support which could help speed up the learning process. You should always try to learn to code by hand because sometimes you're going to need to work without a net and your coding skills will be necessary.

The Code
By viewing the screenshot above, you see that the yellow box and the text inside of it is scrollable using the browser's scroll bar. You notice that there's no scroll bar inside that specific window but that can be changed if you wanted if you added the
The yellow box is created and positioned using a DIV tag with a number of parameters.

Here's the source code for the box:
<div id="Layer1" style="position:absolute; width:600px; height:400px; z-index:1; left: 200px; top: 71px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: scroll">

Some of the parameters of the box should be familiar to you such as the width and height which determines its appearance on the web page, the background color (which is set for yellow) and border width which is set to one. The left and top parameters (left: 200px; top: 71px) shows that the layer should appear 200 pixels from the left edge of the screen and that it should be 71 pixels from the top. The overflow tells the browser to display a scroll bar inside this layer. If you eliminate the overflow option, the web page will be controlled from the browser scroll bar. Try modifying the settings and see what you come up with. Don't forget to put this code between the opening and closing BODY tags.

Here's the source code for the static background image:
<style type="text/css">
body {  background-attachment: fixed; background-image: url(sky.jpg); background-repeat: no-repeat; background-position: center bottom}

This line of code explains where the image location is (both image and HTML file are in same location), the repeat parameter set to not repeat while the image is fixed in the center position of the screen. As you upload the HTML file and the image (from the downloadable zip file) to your website, you can see how these two pieces of code can create a fancy new look for your website. Again, try experimenting with the source code to see how your changes affect the webpage's appearance.

You can click HERE to download the sample image and the HTML containing the CSS code so you can test these files on your own website. Just upload the two files to the root of your website then call the files through your web browser so you can see it work for yourself. Experiment with the source code or create an image of your own to use in the sample.

Thats it. Now you can create your works of art and use them as the backdrop for your own website. Although designing strictly using cascading style sheets will give your website a more professional look, through time and trials you should be able to pick up the parameters quickly. You should also be aware of browser compatibility because what might look good on Internet Explorer might not look that hot on Mozilla's Firefox or Netscape Navigator. Web design is a lot of trial and error but once you complete a few projects using cascading style sheets, you'll wonder how you ever designed a website without it.

About Cascading Style Sheets
You can learn more about cascading style sheets from the World Wide Web Consortium at http://www.w3.org/Style/CSS/

Page: 1

David James Rockingham III is a former radio disc jockey and network administrator. An avid gamer and technology guru who enjoys rock music, sunsets, Star Wars video games, Visual Pinball, classic hot rods and superhero movies (except The Hulk). You can find David James answering questions on DMN Forums (http://www.dmnforums.com). His articles appear on Consumer Electronics Net (http://www.consumerelectronicsnet.com) and Digital Media Net (http://www.digitalmedianet.com).
Related Keywords:css background, setting static background image, cascading style sheets, css design

Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved