多个Div的单一背景

Question

Is there a way of having one image (PNG or SVG) as a background for multiple divs? Please see the images below as to how it would work. Also when the screen width becomes smaller and the divs line up below each other, would there be a way of changing the background to match that aswell?

DIVs without background:

The background:

DIVs with background:

Answer 1

You might be looking for background-attachment: fixed :

If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

 .container { background-color: gray; } .window { background-image: url("https://i.stack.imgur.com/RPBBs.jpg"); background-attachment: fixed; display: inline-block; } 

 <div class="container"> <div class="window" style="width: 100px; height: 50px; margin: 20px;"></div> <div class="window" style="width: 200px; height: 50px; margin: 20px;"></div> <div class="window" style="width: 500px; height: 50px; margin: 20px;"></div> </div> 

Answer 2

Using background-attachment: fixed will give you the desired effect. You just need to make sure your background image works within the bounds of the div or else you will get tiling which can be turned off with background-repeat: none

 .border { border: 1px solid #000; position: absolute; } div { background-image: url("https://dummyimage.com/500x250/000/fff.png"); background-attachment: fixed; } 

 <div id="div1" class="border" style="height:100px;width:200px"></div> <div id="div2" class="border" style="left:225px;height:100px;width:200px"></div> <div id="div3" class="border" style="top: 125px;height:100px;width:225px"></div> <div id="div4" class="border" style="left:250px;top:125px;height:100px;width:175px"></div> 

Answer 3

How's it going? I'm still relatively new to HTML and CSS, but I think we can tackle this one together!

Your "WHOLE" picture might exist in a that contains the other "WINDOW" elements...where each of the window elements is positioned relative to the parent div that contains the whole picture

 .whole{ position:relative; } .UpperL{ position: absolute; height: 25px; width: 100px; } .UpperR{ position:...; } .LowerL{ position:...; } .LowerR{ position:...; } 

 <div class="whole" img src="whole picture.png"> <!-- let the whole class contain the background image--> <div class="UpperL"> Upper Left Window</div> <div class="UpperR"> Upper Left Window</div> <div class="LowerL"> Upper Left Window</div> <div class="LowerR"> Upper Left Window</div> </div> 

The code doesn't run well yet, but the point of setting four windows inside of a fifth window is to give the four an ability or property to see through the fifth;

If your parent contains the image, but is still colored all white (opacity at 100%), the four window elements should be able to see through the opacity of the fifth window (turning their opacity down to reveal the image).

hmm...