Solved

CSS Background question

Posted on 2003-12-09
7
1,392 Views
Last Modified: 2010-04-09
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
Comment
Question by:livegirllove
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 15

Expert Comment

by:Timbo87
ID: 9908159
CSS cannot stretch a background picture.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9908193
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
 
LVL 7

Expert Comment

by:TransBind
ID: 9908198
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
Independent Software Vendors: 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!

 
LVL 1

Author Comment

by:livegirllove
ID: 9908274
I'll try these out and see which works best.
thanks
0
 
LVL 1

Author Comment

by:livegirllove
ID: 9959284
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 9959643
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
 
LVL 1

Author Comment

by:livegirllove
ID: 9959804
that's perfect!!  Thanks!!
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question