javascript - Getting two divs to share one background image - Stack Overflow

admin管理员组

文章数量:1345896

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) .jpg . 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.

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) https://i.sstatic/CsdZh.jpg . 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.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 9, 2016 at 1:02 cccccc 46711 gold badge66 silver badges1111 bronze badges 6

• 2 The solution to your problem is actually simple, and lies in the background-position of the images. Set the background image to be the same, but set the background-position to be different depending on which part you want to display. – random_user_name Commented Feb 9, 2016 at 1:04
• @cale_b please post your answer as an answer, not as a ment.. – Joaquín O Commented Feb 9, 2016 at 1:07
• 2 Another 'solution' is to wrap both divs in another div and give this wrapper div the background image. – user2417483 Commented Feb 9, 2016 at 1:07
• @JoaquínO - I won't. Two reasons: 1. There's not quite enough info in the question to do a good job. 2. It's simple enough that I'd rather let someone else who is interested in earning the rep do it. – random_user_name Commented Feb 9, 2016 at 1:08
• Thanks a lot guys :) ... I'll also play around with your suggestion jeff. – ccc Commented Feb 9, 2016 at 1:26

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

Based on @cale_b's ment, 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./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./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>

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 remend 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

本文标签： javascriptGetting two divs to share one background imageStack Overflow