Solved

CSS Background question

Posted on 2003-12-09
7
1,377 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
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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to count in a table in php 22 33
AdminLTE with wordpress 15 50
Place text over image using CSS 6 42
Call a function within the ASP code 4 6
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

813 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now