Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Stretch div background image

Posted by: Stripes Sep 1 2011, 02:54 PM

Hey guys, I'm designing a new website and I'd like to know if it's a good choice to have one rather large image (900w 700h) to be the background of the main content layer, and if so...I'd like to have it stretch out with the content, the length-wise way. So this would mean when I write content and have it run down on spaces, the background will stretch with the div layer that has the text in it.

Posted by: pandy Sep 1 2011, 05:12 PM

Background images can't be stretched (yet). What you can do is position an inline image behind other content and stretch it by setting its width to 100% (and leave the height out). It may or may not look good, depending on the kind of image it is and how much it is stretched.

If it's a good idea to have a large background image is another matter.

Posted by: Darin McGrew Sep 1 2011, 09:41 PM

Another approach is to use a non-repeating background image, with a background color that blends with the color at the edges of the background image.

Posted by: Stripes Sep 2 2011, 03:48 PM

Yeah, I've used the method that Darin said before in some designs, which works pretty good. I think I understand your idea pandy, and will give it a go. However, my new website is moving away from one large webpage look to a clean centered content of 80% only, which is where issues come up that I'd like it to stretch. My image will be 800px wide, so they will need to stretch quite a bit if someone on a widescreen monitor views the page, even if it's 80% and 800px on a 1024x768, double the width will hurt the image...so I will only be going with a gradient color and not a digital image.

Posted by: Stripes Sep 2 2011, 05:11 PM

So, I've been working on the background and I think I'll get it worked out....however I am having some centering issues. I'm using a wrapper at 80% and I have the left and right margins set to auto (also tried 10%) but I keep getting my page centered to one side or the other! What am I doing wrong?

IPB Image

Posted by: Darin McGrew Sep 2 2011, 06:10 PM

Looking at your image, one approach would be to have 3 images. The top image would be behind the others, and would be a gradient from the dark blue at the top to the lighter blue that matches the background color. The left background image would blend with the top background image, extending the dark color down the left edge. In the same way, the right background image would blend with the top background image, extending the dark color down the right edge.

Posted by: pandy Sep 2 2011, 06:40 PM

Can't say what you are doing wrong from looking at a screen cap. Code please.

Posted by: Stripes Sep 4 2011, 02:11 PM

Finished my template design, except for the right div layer. Code is below image.
IPB Image

My index.html

CODE

<head>
<title>Nic's PC Services</title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #1E3349;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="content">
    <div id="header"><img src="images/header.gif" width="800" height="95" /></div>
    <div id="navbar"><img src="images/navbar_holder.png" width="800" height="25" /></div>
    <div id="contentarea">
      <div id="left"><iframe src="docs/l1block.html" frameborder="0" scrolling="auto" height="340" width="580"></iframe></div>
      <div id="right">Right</div>
      <div id="leftspace"></div>
      <div id="left2"><iframe src="docs/l2block.html" frameborder="0" scrolling="auto" height="340" width="580"></iframe></div>

    </div>
    <div id="footer">
    <center><iframe src="docs/footer.html" frameborder="0" scrolling="no" width="780px"></iframe></center>
    </div>
  </div>
</div>
</body>
</html>

My CSS Sheet

CODE

@charset "utf-8";
/* CSS Document */
* {
    margin: 0px;
    padding: 0px;
}
#wrapper {
    height: 100%;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
#wrapper #content {
    height: 100%;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}
#contentarea {
    height: 700px;
    background-image: url(../images/content_bg.png);
    background-repeat: no-repeat;
    padding: 10px;
}
#wrapper #content #contentarea #left {
    float: left;
    width: 588px;
    background-image: url(../images/left_bg.png);
    background-repeat: no-repeat;
    height: 348px;
}
#wrapper #content #contentarea #leftspace {
    float: left;
    width: 588px;
    height: 8px;
    /* [disabled]clear: both; */
}
#wrapper #content #contentarea #left2 {
    float: left;
    width: 588px;
    background-image: url(../images/left_bg.png);
    background-repeat: no-repeat;
    height: 348px;
}
#wrapper #content #contentarea #right {
    float: right;
    width: 192px;
}
#footer {
    clear: both;
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    height: 80px;
    padding: 10px;
    width: 100%;
}

#header {
}
#navbar {
}

Posted by: Stripes Sep 7 2011, 08:39 PM

Bump...any idea?

Posted by: pandy Sep 7 2011, 08:52 PM

It is inside #wrapper, at least with the code you posted above.

I gave #wrapper a white border.

Posted by: Stripes Sep 8 2011, 06:29 PM

So you're saying it was fine for you...? or that you worked a new code?

EDIT : I just remade all the code and got it centered now. strange. thanks anyways!

Posted by: pandy Sep 8 2011, 06:47 PM

I don't know if it was fine or not since I don't know what you expected. The screen cap is of the code you posted. The only addition I made was the border on #wrapper to show that it does contain the problem DIV.