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
Post a Comment