CSS Background question

This is what I am useing now for text color and BG image.  Is there a way to make the picture stretch across the BG?  Like width=100% ???
I dont want to have to put in an 800x600 or larger picture just to fill the BG.  I can't use repeat because it is just one picture.

Any Ideas??

<style type="text/css">
  <!--
    a:link  { text-decoration: none; color: #105415; font-family: Eras Medium ITC;
      font-size: 18px;}
    a:active  { text-decoration: none; font-family: Eras Medium ITC;font-size: 18px;color: #105415; }
      a:visited { text-decoration: none; font-family: Eras Medium ITC;font-size: 18px;color: #105415; }
    a:hover  { text-decoration: none; font-family: Eras Medium ITC;font-size: 18px; color: #DE0000; }
    p {color: #395410;
      font-family: Eras Medium ITC;
      font-size: 14px;
      text-decoration: strong;}  
   body
{
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("images/xmasBG.jpg");
}
-->
</style>
LVL 1
livegirlloveAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Timbo87Commented:
CSS cannot stretch a background picture.
0
seanpowellCommented:
Not with the CSS background image. You need to use a layered (z-index) div.

This example uses 500 x 500. If you need a different size, just divide the width and height by 2 to center the image with the negative margins:

<html>
<head>
<style type="text/css">
<!--
div#back { position:absolute; width:500px; left: 50%; top:50%; margin-left:-250px; margin-top:-250px; height:500px; z-index:-100; }
-->
</style>
</head>
<body>
<div id="back"><img src="images/xmasBG.jpg" width="100%" height="100%"></div>
</body>
</html>
0
TransBindCommented:
You can do this:

<style="background-image: url(images/xmasBG.jpg;); width:100%; height:399px; border:0 solid black; overflow:auto;">

but remember that if you image is 600px in width and you stretch it to 800px then extra pixels will be recreated and image will not look unless its a one color image ...
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

livegirlloveAuthor Commented:
I'll try these out and see which works best.
thanks
0
livegirlloveAuthor Commented:
George-  I used your method and it is working pretty well.  However I have a few more questions.  The bg image I'm using is 1200px wide.  This is what I have now so that the picture won't be to huge and will fill the whole BG.
<style type="text/css">
<!--
div#back { position:absolute; width:100%; left: 0px; top:0px; margin-left:0px; margin-top:0px; height:690px; z-index:-300; }
div#back1 { position:absolute; width:100%; left: 0px; top:0px; margin-left:0px; margin-top:690px; height:690px; z-index:-300; }
div#back2 { position:absolute; width:100%; left: 0px; top:0px; margin-left:0px; margin-top:1380px; height:690px; z-index:-300; }
div#back3 { position:absolute; width:100%; left: 0px; top:0px; margin-left:0px; margin-top:2070px; height:690px; z-index:-300; }
div#back4 { position:absolute; width:100%; left: 0px; top:0px; margin-left:0px; margin-top:2760px; height:690px; z-index:-300; }
div#back5 { position:absolute; width:100%; left: 0px; top:0px; margin-left:0px; margin-top:3450px; height:690px; z-index:-300; }
div#back6 { position:absolute; width:100%; left: 0px; top:0px; margin-left:0px; margin-top:4140px; height:690px; z-index:-300; }
div#back7 { position:absolute; width:100%; left: 0px; top:0px; margin-left:0px; margin-top:4830px; height:690px; z-index:-300; }


-->
</style>
</head>
<body bgcolor="#B38859" text="#333333" link="#333333" vlink="#333333" alink="#333333">
<div id="back"><img src="images/poetryBG.jpg" width="100%" height="100%"></div>
<div id="back1"><img src="images/poetryBG.jpg" width="100%" height="100%"></div>
<div id="back2"><img src="images/poetryBG.jpg" width="100%" height="100%"></div>
<div id="back3"><img src="images/poetryBG.jpg" width="100%" height="100%"></div>
<div id="back4"><img src="images/poetryBG.jpg" width="100%" height="100%"></div>
<div id="back5"><img src="images/poetryBG.jpg" width="100%" height="100%"></div>
<div id="back6"><img src="images/poetryBG.jpg" width="100%" height="100%"></div>
<div id="back7"><img src="images/poetryBG.jpg" width="100%" height="100%"></div>

THe problem is that no matter what size the picture is it still leaves a gap on the right side.  If I change to :
div#back7 { position:absolute; ###width:1200px;### left: 0px; top:0px; margin-left:0px; margin-top:4830px; height:690px; z-index:-300; }

It makes the page have a scroll bar on the bottom which I dont want.  I want to be able to use this on any screen res and have it strech the width to fit, that way I could bring the image size down to 800px wide to reduce load time.  And when some body with higher screen res looked at it it would stretch.

The url of the page I'm working on is:
http://www.siglindascarpa.com/curr_poetry.html

thanks
0
seanpowellCommented:
I'm not sure I would use that approach...

First, I'd create a properly tiled image in Photoshop so that you can repeat the image. It would be 200 x 100 pixels and weigh in at 5kb.

Second, I'd use the background-repeat attribute on the body tag so it doesn't make any difference how long the page is, or what the user's monitor size is.

Third, I'd upload all that to my web site so you could have a look:

http://www.pdgmedia.com/livegirllove.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
livegirlloveAuthor Commented:
that's perfect!!  Thanks!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.