Josh Slade Josh Slade - 8 months ago 41
CSS Question

Make the top X amount of pixels on a page a white background, then the rest black, and place an image over it in the center

Apologies for wording that awfully, i'm fairly new to this, I need the top (for instance) 300 pixels to be white, then down from there a black background, then i'd like to place this image at the top center: and align where the transition from white to black is.


Try this code

body{color: #fff;margin: 0;background-color: #000;}
.div1{background-color: #fff;color: #000;height: 250px;margin: 0;position: relative;text-align: center;font-size: 30px;}
.div2{position: relative;z-index: 1;}
.car_div{position: absolute;bottom: -70%;text-align: center;width:100%;}
<div class="div1">
content 1
<div class="car_div">
<img src="">
<div class="div2">
content 2

Demo here