CSS website background

0 votes
asked Oct 26, 2010 by t0mcat

I am looking for some info on CSS style used for many websites these days. Its a style where whole screen is occupied by one background and the websites content is posted on top of it under smaller dimensions. Something like this website: http://www.obiweb.com.au/ How do we achieve something like this?

2 Answers

0 votes
answered Oct 26, 2010 by mark-steggles

This is easily achieved by using the css background property on the body tag:

body {background:#fff url(image.png) repeat 0 0}

You can read up on this css property here: http://www.w3schools.com/css/css_background.asp

You would then have a div container inside your body tag that has a width and margin set to auto:

.container {margin:0 auto;width:900px}

Hope this helps

0 votes
answered Oct 26, 2010 by sarfraz

They apply background image to body tag. Here is for example CSS used by the site you mentioned in your question:

body {
  background:url("/site/default/images/bg_860.png") repeat-y scroll center center transparent;

You may read more about background property and its uses here.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter