Home/ Questions/Q 8609223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T03:49:51+00:00

I have a content div and inside it there are two div’s with background

  • 0

I have a “content div” and inside it there are two div’s with background images (gradient and shadow). Now I have a following problem if there is a lot of content I have to resize my “content div” but when I do that a BIG GAP shows between my div’s (top and bottom divs). I know i can solve it by inserting a bigger images, but it is a no go for me because I must resize images every time when the content div gets bigger.

Is there a any way to solve this? Thank you guy’s!!!

Fiddle WITH LESS CONTENT (Haven’t resized div so it look’s good)

Fiddle WITH MORE CONTENT Resized my “content div” and there is a gap in the middle 🙁

HTML Code here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="author" content="Dejan Peic"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title></title>

</head>
<body>

<div class="mainwrap">
<div class="content">
<p><b>LESS CONTENT LOOKS OK!!!</p>
<div class="top">
</div>

<div class="bottom">
</div>
</div><!--/content-->
</div>
</body>
</html>

CSS Code:

*{margin:0px;padding:0px}

.content{
background-color:white;
position:relative;
display:block;
width:995px;
height:528px;
margin:0px auto;
margin-top:40px;
margin-bottom:40px;
z-index:100;
overflow:hidden;
}

.top{
position:absolute;
z-index:-100;
background-image:url('http://www.robertpeic.com/Global%20one/template/content-top.png');
top:0;
width:990px;
height:203px;
background-size: contain;
}

.bottom{
position:absolute;
z-index:-100;
background-image:url('http://www.robertpeic.com/Global%20one/template/content-bottom.png');
bottom:0;
width:989px;
height:225px;
background-size: contain;
}

p{
margin-left:50px;
margin-top:20px;
font-size:25px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Divide the background image into three parts rather than two:

    <div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>

    Place all your content in the middle div, then give it a background image that repeats vertically (background-repeat: repeat-y). When the amount of content increases, the middle div will get taller and the background will repeat vertically to match, so you’ll never end up with a gap.

    • 0