Web Shoppe | CSS | Backgrounds

Home | Coding | CSS | Backgrounds

Backgrounds

CSS makes using backgrounds a delight, because everything can now have a background! Take a look:

This is a bit of text
with a repeating
image for a background.
This is a textarea with an image for a background.
And this is a paragraph with a background image. You get the idea.

To do it, simply add this code to any HTML tag:

style="background-image:url(background.jpg)"

You can also add straight colors, rather than images, for your background:

style="background-color:#B6C397"

CSS also gives you a great amount of control over your regular page backgrounds. Such as the way it repeats:

<style type="text/css"><!--
body {background-image:url(background.gif);
      background-repeat:no-repeat}
--></style>

Above, "background.gif" will not repeat, only displaying once. You could also put "repeat-x" to repeat it horizontally, or "repeat-y" to repeat it vertically. Of course, if you want more precision, you can position it yourself:

<style type="text/css"><!--
body {background-image:url(background.gif);
      background-repeat:no-repeat;
      background-position:300px 100px}
--></style>

Here, "background.gif" is displayed in the background of the page once, 300 pixels from the left of the screen and 100 pixels from the top. You can also enter percentages, such as {background-position:50% 50%}, or directions, such as {background-position:top center}.

Lastly, you can "fix" the background image so that it doesn't scroll with the rest of the page by adding {background-attachment:fixed}.