TXGenWeb & CSS

Fun Things to Do with CSS

Backgrounds

One of the first things we do when we design a new page is to decide on a background. The style these days tends to be white with a huge graphic up top but there are an amazing number of combinations you can use to create an attractive and simple background.

With HTML and CSS you can actually use multiple images for a body background and when you add containers to your page, each one can have a different background color or image.

My first example is a simple background pattern and a transparent gif used in concert with a background color.

We start with the body tag <body></body>

Add a style <body style=" ">

I want the background to be yellow. background-color: Yellow;
I want TWO images. background-image: url("../images/balloon.gif"), url("../images/polkadot.jpg");
I only want one balloon
but I want the polkadots to repeat vertically down the page. background-repeat: no-repeat, repeat-y;

List your images separated by a comma. Note that the images are applied, as a "stack" in the order that you list them so if the polkadot is listed first, it will be ON TOP OF the balloon and you won't be able to see the balloon.

The default action for a background image is to tile it across and down the whole page.

We can change the background-repeat to no-repeat and it will only be applied one time. We can also tell it to repeat vertically (y) or horizontally (x). These commands are listed in the same order as the images I've already applied. So the balloon has no repeat and the polkadots repeat vertically down the left side of the page.

I know everyone has seen this happen at least once.
The page is wider than the background image so it repeats on the right side.

There are 2 ways to fix this without rebuilding the graphic.

You can use the vertical repeat like we did above above. background-repeat: repeat-y;

Or you can simply use a SIZE for the background. background-size: 100%;

In addition, you can specify an exact spot for the images but that's a little more complex, I just want you to know it's possible.

This page uses part of this example:
background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed;

or: background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: 400px 50px;

When using units of measurement such as px or percentages, the top left corner of the image will be placed on your coordinates with (x y) as the format (horizontal vertical). So, using 50% 50% will NOT center the IMAGE but will center the TOP LEFT CORNER of the image.

Fun Things to Do with CSS

Backgrounds

Alignment