Geek Answers Handbook

How to make a dynamic background div in CSS?

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

I need to have these units on my web page, but I do not know how I could do this dynamically. I have content that will be dynamic, for example, sometimes I have small text, but sometimes I have large text and the page does not follow the same structure as in small text content.

I would like the background to fit the size of the content and keep the same structure as in the image above.

UPDATE: Coco approach: enter image description here

+4
source share
4 answers

Just try this layout. I think this will help you fix this problem.

Script 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; }
+2
source

I don’t know if I missed something, but it seems that the only thing you need is the following: where do you have

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

change it to

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

and the background will cover the page as needed

0
source

Wrap your content for this specific background color / section in a div that is 100% of the required width. Play around w / percent width 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

0
source

I don’t know if I understood well, but I think you’ll have to add

background-position: bottom

0
source

More articles:


All Articles