Expanding content div, background image div fill content div

Question

Bambam007 0 Newbie Poster

13 Years Ago

This is a new forum for me, hello all!
I am creating a layout with only one column
header content footer
content expands as its contents do.
I have this much working.
The problem is:
I want a background div [bg_container] to to fill the height of the content div.
The background is comprised of images to give variation - top fill and bottom
In the code below I have used background fill colours for testing. The bg_t and bg_b is a fixed height, and the bg_expand is expandable.
The way it is at the moment, the text appears on top of the background image. I can get it to appear over the top with absolute but then I lose my layout and the background still doesn't expand.
Can anyone see the solution?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head>
<title>content expand container - bg fill container</title> 
    <style type="text/css">
        html,
        body {
            background-color: green;
            margin:0 0 0 0;
            border: none;
            padding:0;
            height:auto;
        }
        img{
        border: 0 none;
        outline: 0;  
        }
        #container {
           position: relative;
           top: 0px;
           margin: 0 auto;
           border: 0;
           width: 1152px;
           padding: 0;
        }
        #header {
            background-color: blue;
            position:absolute;
            top:0px;         
            width:100%;
            height:100px;
            padding: 0;
            margin: 0; 
        }
        #content {
            position: relative;
            height: auto !important;
            padding-top:100px;   /* Height of the header */
            padding-bottom:100px;   /* Height of the footer */
            margin: 0;
        }
        #text_container {
            position: relative;
            display: block;     
            margin: 0 auto;
            border: 0;
            padding: 0; 
            left:0px;
            top:0px;
            height: auto;
            z-index: 2;
        }
        ul {
            border: 0;
            font-family: arial, helvetica, sans-serif;
            font-size: 13px;
            color: fuchsia; 
            font-weight: bold;  
        }
        #bg_container {
            position: relative;
            display: block;
            margin: 0 auto;
            border: 0;
            padding: 0; 
            left:0px;
            top:0px;
            height: 100%;
            z-index: 1;
        }
        #bg_t {
            position: relative;
            background-color: #3c3c3c;
            margin: 0 auto;
            border: 0;
            padding: 0;
            top:0px;
            height: 100px;
        }
        #bg_expand {
            position: relative;
            background-color: #787878; 
            margin: 0 auto;
            border: 0;
            padding: 0;
            height: auto !important;
            min-height: 100px;
        }
        #bg_b {
            position: relative;
            background-color: #3c3c3c;
            margin: 0 auto;
            border: 0;
            padding: 0;
            height: 200px;
        }
        #footer {
            background-color: blue;
            position:absolute;
            bottom:0px;         
            width:100%;
            height:100px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">Header</div>
    <div id="content">
        <div id="text_container">
        <ul>
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />            
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
        </ul>
        </div>
        <div id="bg_container">
            <div id="bg_t"></div>
            <div id="bg_expand"></div>
            <div id="bg_b"></div>
        </div>
    </div>
    <div id="footer">footer</div>
</div> 
</body>
</html>

web-design

3 Contributors
5 Replies
231 Views
3 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Bambam007

c_bomb 0 Newbie Poster

13 Years Ago

I'm not entirely sure as to what you want to do, because you say you want to stretch a image from top to bottom, from left to right, but I dont see a image in your code.

And your code is a wee bit messy.

But if there was a image, you would do something like this.

body {
  background: color url(image.png) 100% 100% no-repeat;
}

You can add images and stuff to the body, that'll make the image fill the whole screen. because of 100% I added.

Let me know how it goes.

Cheers.

teedoff 3 Posting Pro

13 Years Ago

Test code?? If you mean a code validator then validator.w3.org.

If you mean "POST" code, then I think pastebin is one.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Bambam007 0 Newbie Poster · Answer 1 · 2011-09-15T17:52:42+00:00

hello, thanks for responding =]
I actually wanted an image to repeat on the y axis, not on the x.
And there is an additional image a the top and bottom of the background to give variation. With the help of a friend - D I have it worked out. One solution anyway.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head>
<title>content expand container - bg fill container</title> 
    <style type="text/css">
        html,
        body {
            background-color: green;
            margin:0;
            border: none;
            padding:0;
            height: auto;
        }
        img{
            border: 0 none;
            outline: 0;  
        }
        #container {
           position: relative;
           top: 0px;
           margin: 0 auto;
           border: 0;
           width: 1152px;
           padding: 0;
        }
        #header {
            background-color: blue;
            position:absolute;
            top:0px;         
            width:100%;
            height:100px;
            padding: 0;
            border: 0;
            margin: 0; 
        }
        #content {
            position: relative;
            height: auto !important;
            padding-top:100px;   /* Height of the header */
            padding-bottom:100px;   /* Height of the footer */
            margin: 0;
            border: 0;
        }
        #text_container {
            position: relative;    
            margin: 0 auto;
            border: 0;
            padding: 0; 
            left:0px;
            top:0px;
            z-index: 5;
        }
         ul {
            margin: 0;
            padding: 0;
            border: 0;
            font-family: arial, helvetica, sans-serif;
            font-size: 13px;
            color: fuchsia; 
            font-weight: bold; 
            list-style-position: inside;  
        }
        #bg_container {
            position: relative;
            margin: 0 auto;
            border: 0;
            padding: 0; 
            left:0px;
            top:0px;
            width: 100%;
            min-height: 1155px;
            z-index: 1;
        }
        #bg_t {
            position: absolute;
            background-color: #3c3c3c;
            margin: 0 auto;
            border: 0;
            padding: 0;
            top:0px;
            height: 100px;
            width: 100%;
            z-index: 3;
        }
        #bg_expand {
            position: static;
            background-color: #787878; 
            margin: 0 auto;
            border: 0;
            padding: 0;
            width: 100%;
            z-index: 3;
        }
        #bg_b {
            position: absolute;
            background-color: #3c3c3c;
            margin: 0 auto;
            border: 0;
            padding: 0;
            bottom: 0px;
            height: 200px;
            width: 100%;
            z-index: 3;
        }
        #footer {
            background-color: blue;
            position:absolute;
            bottom:0px;         
            width:100%;
            height:100px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">Header</div>
    <div id="content">
        
        <div id="bg_container">
            <div id="bg_t"></div>
            <div id="bg_expand">
             <div id="text_container">
        <ul>
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />
            <li>hello</li> <br />            

        </ul>
        </div>
            </div>
            <div id="bg_b"></div>
        </div>
    </div>
    <div id="footer">footer</div>
</div> 
</body>
</html>

Also please tell me where my code can be cleaned up, you mentioned it was messy. I kind of put things together as I think of them, fumble through the though process. So if there is anything in there I don't need, let me know =]

Bambam007 0 Newbie Poster · Answer 2 · 2011-09-15T17:54:25+00:00

also does anyone know of the webpage where you can test code and use it to post on forums. It has 4 windows from memory, it's really good. Can't find the bookmark. Has a funny name.

Bambam007 0 Newbie Poster · Answer 3 · 2011-09-16T05:39:17+00:00

thanks for that, its like pastebin but from what i can remember it gives you a preview. you can have js in one box, css in another and html in another. Helpful if you need to post big code!