html - Span background image across 2 table rows but have different background colors -
doesn't have table div's.
my image has transparent parts blend in. top part needs blend different background color bottom half.
so in mind table 2 rows 1 row has 1 background color , other has background color image spans on both rows.
is possible in html/css. avoid me cutting image two.
are image or rows fixed size? play background positioning &/or sizing.
.row { height: 100px; background-image: url(http://www.fillmurray.com/1000/200); border: 1px solid red; width: 500px; margin: auto; } .one { background-position: top center; margin-top: 1em; } .two { background-position: bottom center; margin-bottom: 1em; }
<div class="row one"></div> <div class="row two"></div>
or, logically, though easier wrap "rows" in div , put bg image on that.
.row { height: 100px; background-image: url(http://www.fillmurray.com/1000/200); border:1px solid red; width: 500px; margin: auto; } .wrapper { background-image: url(http://www.fillmurray.com/1000/200); width: 500px; background-position: center; margin: 1em auto; } .wrapper .row { background-image: none; }
<div class="wrapper"> <div class="row"></div> <div class="row"></div> </div>
Comments
Post a Comment