[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1416
  • Last Modified:

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>
0
livegirllove
Asked:
livegirllove
1 Solution
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
livegirlloveAuthor Commented:
that's perfect!!  Thanks!!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now