CSS: Picture Background

• Tweet

• Tweet

CSS itself is an important part of web page design, but just the bone of it. Without pictures and photos, CSS is not more than just paragraphs of texts.

To embed a picture or photos of yours in background, you need a simple CSS rule: background.

Say you have a nice picture named mypic.jpg that you want in the entire background, tiled everywhere you can see on the web page, simply apply this CSS rule to the web page:

body {background:url(mypic.jpg)}

where body is the root element of the web page, representing everywhere the browser shows, from top left corner to the bottom right.

Tiled and repeated pictures are not pretty actually, so you may want it to show just once instead of fitting everywhere you scrolls. The following trick would do.

body {background:url(mypic.jpg) no-repeat}

And now the picture shows only once in the background. To repeat it horizontally,

body {background:url(mypic.jpg) repeat-x}

To repeat it vertically,

body {background:url(mypic.jpg) repeat-y}

To place it fixed at a position 100 pixels away from the top and 60 pixels from the left of its container – in this case, body –

body {background:url(mypic.jpg) no-repeat 60px 100px}

Not only body, but also a lot other HTML elements can be set a background picture in this way. For example, with a table,

table {background:url(mypic.jpg) repeat-y 60px  0}

This would vertically repeat mypic.jpg with a distance of 60px to the left border of the table.