How to add a different background color for each section with a SVG image in front of it

user_17811512 0
Viewed 33

I'm trying to have a different background color for each individual section/div with a hexagon grid (SVG with transparent gaps) in front of it. Currently it looks like this and I'm woundering how to push the red background up so that it is about on the blue line? I tried with play with padding and margin but it didn't affect anything.

enter image description here

That's the current code:



body {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' viewBox='0 0 5044 2922'%3E%3Cpath fill='slategrey' d='M -780 110 L 780 110 L 1560 1461 L 780 2812 L -780 2812 L -780 110 M 1742 -1351 L 3302 -1351 L 4082 0 L 3302 1351 L 1742 1351 L 962 0 L 1742 -1351 M 1742 1571 L 3302 1571 L 4082 2922 L 3302 4273 L 1742 4273 L 962 2922 L 1742 1571 M 4264 110 L 5824 110 L 5824 2812 L 4264 2812 L 3484 1461 L 4264 110 Z'/%3E%3C/svg%3E") repeat;


/*
  display: grid;
  
  place-content: center;
  place-items: center;
  gap: 1em;

  min-height: 100vh;
  margin: 0;  */
}

.backgroundable {
 
  display: grid;
  grid-template-areas: "cell";

   /*resize: both;*/
  overflow: hidden;

}

.backgroundable::before {
  
  grid-area: cell;
  display: block;
  content: '';
  z-index: -1; /* move the background color layer _behind_ the body element */
}

/* you can use real elements, too, if you like */
.a::before {
  background: khaki;
  padding: -20px;
}

.b::before {
  background: red;
  margin-top: -40px;
  
}


.backgroundable-wrapper {
  position: relative;
  grid-area: cell;
  /*width: 25vw;
  height: 25vw;
  padding: 1em;*/
}

}

And the that’s the html


<div class="backgroundable a">
 <div class="backgroundable-wrapper">content!<br><br><br><br><br><br><br><br><br></div>
</div>

<div class="backgroundable b">
  <div class="backgroundable-wrapper">more content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>

<div class="backgroundable c">
  <div class="backgroundable-wrapper">more content!<br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
background svg css html
1 Answers

There may be a better way to do it, I'm not used to using svg, but here is my attempt:

  • Call the svg on every div to add your color with style='background-color:yourColor'
  • Apply background-attachment: fixed to your divs.

body {
  margin: 0;
}
.a {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' viewBox='0 0 5044 2922' style='background-color:khaki'><path fill='slategrey' d='M -780 110 L 780 110 L 1560 1461 L 780 2812 L -780 2812 L -780 110 M 1742 -1351 L 3302 -1351 L 4082 0 L 3302 1351 L 1742 1351 L 962 0 L 1742 -1351 M 1742 1571 L 3302 1571 L 4082 2922 L 3302 4273 L 1742 4273 L 962 2922 L 1742 1571 M 4264 110 L 5824 110 L 5824 2812 L 4264 2812 L 3484 1461 L 4264 110 Z'/></svg>");
}
.b {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' viewBox='0 0 5044 2922' style='background-color:red'><path fill='slategrey' d='M -780 110 L 780 110 L 1560 1461 L 780 2812 L -780 2812 L -780 110 M 1742 -1351 L 3302 -1351 L 4082 0 L 3302 1351 L 1742 1351 L 962 0 L 1742 -1351 M 1742 1571 L 3302 1571 L 4082 2922 L 3302 4273 L 1742 4273 L 962 2922 L 1742 1571 M 4264 110 L 5824 110 L 5824 2812 L 4264 2812 L 3484 1461 L 4264 110 Z'/></svg>");
}
.c {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' viewBox='0 0 5044 2922'%3E%3Cpath fill='slategrey' d='M -780 110 L 780 110 L 1560 1461 L 780 2812 L -780 2812 L -780 110 M 1742 -1351 L 3302 -1351 L 4082 0 L 3302 1351 L 1742 1351 L 962 0 L 1742 -1351 M 1742 1571 L 3302 1571 L 4082 2922 L 3302 4273 L 1742 4273 L 962 2922 L 1742 1571 M 4264 110 L 5824 110 L 5824 2812 L 4264 2812 L 3484 1461 L 4264 110 Z'/%3E%3C/svg%3E");
}
.a, .b, .c {
  background-attachment: fixed;
}
<div class="a">content!<br><br><br><br><br><br><br><br><br></div>

<div class="b">more content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>

<div class="c">more content!<br><br><br><br><br><br><br><br><br><br><br><br></div>

I leave here a second attempt by setting a mask for a container, but I only managed to change the grey color. Also, the text is behind the mask.

body {
  margin:0;
}
.container {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' viewBox='0 0 5044 2922'%3E%3Cpath d='M -780 110 L 780 110 L 1560 1461 L 780 2812 L -780 2812 L -780 110 M 1742 -1351 L 3302 -1351 L 4082 0 L 3302 1351 L 1742 1351 L 962 0 L 1742 -1351 M 1742 1571 L 3302 1571 L 4082 2922 L 3302 4273 L 1742 4273 L 962 2922 L 1742 1571 M 4264 110 L 5824 110 L 5824 2812 L 4264 2812 L 3484 1461 L 4264 110 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' viewBox='0 0 5044 2922'%3E%3Cpath d='M -780 110 L 780 110 L 1560 1461 L 780 2812 L -780 2812 L -780 110 M 1742 -1351 L 3302 -1351 L 4082 0 L 3302 1351 L 1742 1351 L 962 0 L 1742 -1351 M 1742 1571 L 3302 1571 L 4082 2922 L 3302 4273 L 1742 4273 L 962 2922 L 1742 1571 M 4264 110 L 5824 110 L 5824 2812 L 4264 2812 L 3484 1461 L 4264 110 Z'/%3E%3C/svg%3E");
}
.a {    
  background-color: khaki;
}
.b {
  background-color: red;    
}
.c {
  background-color: slategrey;  
}
<div class="container">
  <div class="a">content!<br><br><br><br><br><br><br><br><br></div>
  <div class="b">more content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  <div class="c">more content!<br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>

user_176848090
Related