javascript - Getting two divs to share one background image -


so i'm trying 2 individual divs close in proximity share 1 background image i'm not sure if possible. i've uploaded 2 pictures, second being designed smaller screen (just further explain mean) http://imgur.com/a/2dypd . can't imagine 2 separate background images work wouldn't line when resizing window.

the solution can think of creating 2 plain white divs overlay on 1 single div seems dodgy way go it. i'm not expecting hunk of code written me, maybe explain if it's possible , reference can learn. cheers.

based on @cale_b's comment, can set same background both div's , use background-position property delusion of background sharing.

then can use media queries make in mobile too.

here you've got simple example looks 1 posted:

#wrapper {    width: 800px;    font-family: sans-serif;  }    #top {    height: 200px;    margin-bottom: 20px;    background-image: url("https://placekitten.com/800/400");    background-position: 0 0;    line-height: 150px;    color: #fff;    font-size: 32px;    text-indent: 50px;  }    #bottom {    width: 500px;    height: 100px;    background-image: url("https://placekitten.com/800/400");    background-position: 0 -220px;  }    #bottom ul {    list-style: none;  }    #bottom ul li {    display: inline-block;    list-style: none;    padding: 0 10px;    line-height: 50px;    color: #000;    font-size: 24px;  }
<div id="wrapper">    <div id="top">      i'm banner    </div>    <div id="bottom">      <ul>        <li>i'm</li>        <li>a</li>        <li>menu</li>      </ul>    </div>  </div>


Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -