Expanding content div, background image div fill content div

Question

Bambam007 0 Newbie Poster

12 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 12 Years Ago Latest Post by Bambam007

All 5 Replies

c_bomb 0 Newbie Poster

12 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

12 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!

Expanding content div, background image div fill content div

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers