CODEWITHSUNDEEP
htmlcssbackground
Valter Silva
Valter Silva

Reputation: 16656

How make a dynamic background div in CSS?

I created the following image below just to help you guys understand what I'm trying to do here. background

I need to have this divisions in my web page but I don't know how I could do there in a dynamic way. I have contents that is gonna be dynamic, for example, sometimes I have a small text, but sometimes I have a bigger text and the page don't follow the same structure as when it was in a small text content.

I would like the background follow the size of the content and keep the same structure as I'm showing in the image above.

UPDATE: Coco approach: enter image description here

Upvotes: 4

Views: 3527

Answers (4)

Sanooj
Sanooj

Reputation: 2637

Just try like this layout. i think this will help you to correct this issue

Fiddle link

HTML :

<div class="outer-div">
         <div class="top-bg">
             <div class="container">
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
             </div>
         </div>
        <div class="middle-bg">
            <div class="bg-bottom-div"></div>
        </div>
        <div class="footer"></div>
</div>

CSS :

.outer-div {
    background:#000;
}
.top-bg {
    padding-bottom:40px;
}
.container {
    background:#fff;
    width:400px;
    margin:0 auto;
}
.middle-bg {
    background:#880015;
}
.bg-bottom-div {
    background:#fff;
    width:400px;
    margin:0 auto;
    height:60px;
    position:relative;
    top:-20px;
}
.footer {
    background:#00a2e8;
    height:40px;
}

Upvotes: 2

AAAndreAAA
AAAndreAAA

Reputation: 137

Wrap your content for that particular background color/section in a div that is 100% of the width that you desire. Play around w/ the percentage widths for your desired fluid image: 

#div_background_wrap1 { width:100%; background-color:#000;}
#div_background_wrap2 { width:75%; background:img url; margin:auto;}

and HTML

<div id="div_background_wrap1">
<div id="div_background_wrap2">
 <div>
 //content here//
 </div>
 </div>
 </div>

And for resizing text, consider using CSS3 Media Queries

CSS3 Media Queries

Upvotes: 0

MCSI
MCSI

Reputation: 2904

i dont know if I understood well, but I think you would have to add

background-position: bottom

Upvotes: 0

Coco
Coco

Reputation: 76

I don't know if I'm missing something but it seems the only thing you need is this: where you have

.border-top {width:100%; background:url(../images/border-top-tail.gif) 0 0 repeat-x;}

change it by

.border-top {width:100%; background:url(../images/border-top-tail.gif);}

and the background will cover the page as you need

Upvotes: 0

Related Questions