Marcus Porter February 2016

Getting two divs to share one background image

So I'm trying to get two individual divs which are close in proximity to share one background image but I'm not sure if this is possible. I've uploaded two pictures, the second being designed for a smaller screen (just to further explain what I mean) http://imgur.com/a/2dypd . I can't imagine two separate background images would work as they wouldn't line up when resizing the window.

The only solution I can think of is creating two plain white divs to overlay on one single div but that seems like a dodgy way to go about it. I'm not expecting a hunk of code to be written for me, maybe just explain if it's possible and a reference so I can learn. Cheers.

Answers


Joaquín O February 2016

Based on @cale_b's comment, you can set the same background to both div's and then use the background-position property to do the delusion of background sharing.

Then you can use media queries to make it look good in mobile too.

Here you've got a simple example that looks like the one you 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 a banner
  </div>
  <div id="bottom">
    <ul>
      <li>I'm</li>
      <li>a</li>
      <li>menu</li>
    </ul>
  </div>
</div>


Qaddura February 2016

As I understand, you want to use only one image copy of one image over two div and you dont want to use any overlay.

So you can do the following:
On the bottom div, use background-position-y:-100px or any other desired value. This way you push the image upwards.

This looks promising so far, but you will face an issue with the size of the background size specially if you are making a responsive web page. I would say that background-size:100% 100%for both div would do the job yet it will make the image stretching (unless you go really responsive).

I still recommend using an overlay or even a ready made image. But if you insist on using two div then the above steps should be enough while you have to make your design suitable for this image.

N.B. keep in mind that you might need to use background-repeat:no-repeat

Post Status

Asked in February 2016
Viewed 2,820 times
Voted 11
Answered 2 times

Search




Leave an answer