Dedi Ananto Dedi Ananto - 5 months ago 12
CSS Question

CSS make background with half height behind content

i want to make make div with background, i want to make oeverlay effect in div. this is what i do.
this is what i do

i want to make it like this
what i want



body{
background:blue;
}
.wrap{
height:300px;
width:600px;
margin:0 auto;
background-color:#000000;
}

.background{
padding:20px;
background: #ffffff;
background: -moz-linear-gradient( center top, #ffffff 50%, #e5e5e5 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.5, #ffffff), color-stop(1, #e5e5e5) );
background:-o-linear-gradient(top,#ffffff 50%,#e5e5e5 100%);
background:-ms-linear-gradient(top,#ffffff 50%,#e5e5e5 100%);
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<section class="background">
<div class="wrap">

</div>
</section>
</body>
</html>




Answer

Something like this might get you started.

You can use position:absolute; to remove the .wrap div from the HTML flow, allowing you to position it relative to its parent element (in this case, .container)

Note that you must style the container div as either position:relative or position:absolute in order for position:absolute to work for the wrap div.

body{
	background:blue;
}
.container{position:absolute;height:1000px;}
.background{
    height:200px;
    width:400px;
    margin-top:150px;
	padding:20px;
	background: #ffffff;
}
.wrap{
    position:absolute;
    top:20px;
    left:50px;
	height:250px;
	width:350px;
	margin:0 auto;
	background-color:#000000;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

  <div class="container">
    <section class="background"></section>
    <div class="wrap"></div>
  </div>

</body>
</html>

Comments