ansaurus

Question

Answer 1

+1 A:

How about you just put the background image on your #main?

Gareth 2010-02-07 13:06:00

Answer 2

+3 A:

If you want to attach the background to the main DIV, then specify the background there. It sounds like you want the background to be centered horizontally (background-position: 50%;) but repeat for the vertical extent of the main DIV (background-repeat: repeat-y;).

body {
  background-color: white;
  margin: 0px;
  padding: 0px;
}

#main {
  background-image: url(images/background.jpg);
  background-repeat: repeat-y;
  background-position: 50%;

  // rest as before ...
  width: 850px;
  ...
}

<div id="main">
   Lorem ipsum dolor sit amet, ...

If your background image does not appear it could be because the image is inaccessible or the main DIV has no height--that could happen if female_model and colwrap1 both float.

Dominic Cooney 2010-02-07 13:07:05

Thanks for that but unfortunately my background image is no longer appearing. FYI, my background image file is a vertical strip that has a dimension of 22x600. Any further help would be appreciated.I am using Chrome or FF on Mac OS X. Thanks.

tonsils 2010-02-07 13:21:16

Then leave out Domonic's background-repeat line

Mark 2010-02-07 13:30:12

Still not working - really thought it would be an easy one but this has me stumped!

tonsils 2010-02-07 13:43:09

I've added some more details to the answer; I think I understand better the result you're trying to achieve. It is possible the background image doesn't show up because `main` has no height; as an experiment try specifying a `height:` for that DIV.Can you post an image sketching the effect you're trying to achieve?

Dominic Cooney 2010-02-07 23:47:47

Answer 3

A:

Dominic is correct. Move the background properties from body to the main div and you should have what you need.

If I have understood your question correctly, you want to set the page background to white and have the background of your main div be whatever image you set it to - correct?

If so, setting body to:

body
{
  background:#fff;
}

should do the trick.

Now, I also noticed that the image you want to use has a smaller width than your div. So you will want main to have the following properties:

#main
{
   background-image:url(myimage.jpg);
   background-position:top;
   background-repeat:repeat-x; <!-- you need this as your image is < than the div width -->
 }

That should do the trick. If it still doesnt work, perhaps you want to share the page link on your server. Its possible that we have misunderstood your question.

noobzilla 2010-02-07 13:13:11

no go unfortunately.

tonsils 2010-02-07 13:43:25

ansaurus

tags:

views:

answers:

Website Background Image - How?

related questions