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

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -