Backgroung unique pour plusieurs divisions

Question

Existe-t-il un moyen d'avoir une image (PNG ou SVG) comme arrière-plan pour plusieurs divs? S'il vous plaît voir les images ci-dessous pour savoir comment cela fonctionnerait. Aussi, quand la largeur de l'écran devient plus petite et que les divs s'alignent les uns sur les autres, y aurait-il un moyen de changer l'arrière-plan pour le faire correspondre?

sans fond: DIVs

L'arrière-plan:

DIVs avec fond:

Answer 1

L'utilisation background-attachment: fixed vous donnera l'effet désiré. Il vous suffit de vous assurer que votre image de fond fonctionne dans les limites de la div ou bien vous obtiendrez le carrelage qui peut être désactivée avec 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 2

Vous cherchez peut-être background-attachment: fixed:

Si un Background- l'image est spec ified, la propriété CSS de pièce jointe en arrière-plan détermine si la position de cette image est définie dans la fenêtre ou défile avec son bloc conteneur.

.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 3

Comment ça va? Je suis encore relativement nouveau en HTML et CSS, mais je pense que nous pouvons nous attaquer à celui-ci ensemble!

Votre image « TOUT » peut exister dans un contenant les autres « fenêtre » éléments ... où chacun des éléments de la fenêtre est positionnée par rapport à la div parent qui contient toute l'image

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

le code ne fonctionne pas encore bien, mais le point de mettre en quatre fenêtres à l'intérieur d'une cinquième fenêtre est de donner quatre ou une capacité appropriée pour voir à travers le cinquième; Si votre parent contient l'image, mais reste tout blanc (opacité à 100%), les quatre éléments de la fenêtre doivent pouvoir voir à travers l'opacité de la cinquième fenêtre (en baissant leur opacité pour révéler l'image) .

hmm ...