• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1427
  • 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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