Josh Slade Josh Slade - 1 month ago 6
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: http://imgur.com/a/vPBY2 and align where the transition from white to black is.

Answer

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="https://www.photoshopgurus.com/forum/attachments/quick-tips-and-techniques/2962d1302026102t-help-trying-delete-background-2933d1301946603-help-trying-delete-background-back-car-10-png">
</div>
</div>
<div class="div2">
content 2
</div>

Demo here https://jsfiddle.net/pac2xqy9/