How best to make up the block "choose a pizza" on top of the other two in the picture (or maybe you don’t need 2 - write the best way, please)
2 answers
For example, transform: translateY(-NNpx) :
img { max-width: 100%; width: 100%; } body { margin: 0; background: #ccc; } .content { max-width: 300px; width: 100%; height: 300px; margin: 0 auto; background: #fff; -webkit-box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7); box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7); -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); } <div class="wrap"> <div class="top"> <img src="http://www.wallpapersonview.com/wallpapers/2/fbcover_great_quality_facebook_timeline_cover_picture-588.jpg" alt=""> </div> <div class="content"> </div> </div> Or margin-top: -NNpx :
img { max-width: 100%; width: 100%; } body { margin: 0; background: #ccc; } .content { max-width: 300px; width: 100%; height: 300px; margin: 0 auto; background: #fff; position: relative; -webkit-box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7); box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7); margin-top: -100px; } <div class="wrap"> <div class="top"> <img src="http://www.wallpapersonview.com/wallpapers/2/fbcover_great_quality_facebook_timeline_cover_picture-588.jpg" alt=""> </div> <div class="content"> </div> </div> Or + comment. .content {position: relative: top: -NNpx;}
HamSter HamSter
18.1k 6 gold signs 33 silver marks 83 bronze marks
|
It's simple: add a picture to the background and press it up to the height:
.container { background: url('https://placeimg.com/1900/150/any') 50% 0 no-repeat #ccc; padding: 50px 0; } .container>div { min-height: 300px; box-shadow: 0 0 10px #000; background: #fff; margin: 0 auto; width: 50%; } <div class=container> <div></div> </div> 
Crantisz Crantisz
8.599 2 gold marks 8 silver marks 38 bronze marks
|