Question 188858 in CSS Question posted in
Some basic documentation can be found here.

Css – How to repeat a clipped image as a vertically tiled background?

I am attempting to create a vertically tiled background by clipping the top 50px of a background image and using only that clipped portion. However, the code example provided below is not behaving as intended. Despite assigning a higher z-index to <div class="content">, it is also being clipped. Additionally, the clipped portion of the image is not repeating.

Although I have managed to obtain the desired result by removing the remarks in the code (like here: https://jsfiddle.net/jamacoe/1ej3k80o/3/), it involves repeating the <div class="clipped"> container. Is there a way to accomplish this using only a single <div class="clipped"> container with a height of 100% ? I would greatly appreciate any insights or alternative approaches to achieve the intended effect. Thank you!

.outer {
  border: 1px solid red;
  height: 150px;
  overflow: hidden;
  position: strict;
}
.clipped {
   background-image: url("https://source.unsplash.com/featured/?nature");
   clip-path: inset(1 0 calc(100% - 51px) 0);
   background-repeat: repeat-y;
   height: 50px;
   z-index: -1;
}
.content {
  position: absolute;
  top: 0;
  z-index: 1;
}
p {
  color: white;
  background-color: rgba(255, 255, 255, 0.25);
}
<div class=outer>
  <div class=clipped></div>
  <!-- div class=clipped></div>
  <div class=clipped></div -->
  
  <div class=content>
    <p>content 1</p>
    <p>content 2</p>
    <p>content 3</p>
    <p>content 4</p>
  </div> 
</div>
Tags:

2

Answers


  1. 0

    Probably not the best approach and not quite what you want but you can make a bunch of these manually in a graphic editor, for example Figma, and make them appear randomly using js by making a list of CSS classes each with a different background-image and using math.random() to pick a random one.

    Clipping them directly from the website might also hurt the performance a lot since Unplash images are .jpg images, but you can use way faster .webp images instead via converting them here for example.

    Login or Signup to reply.
  2. 0

    You can’t do this with a clip-path in the way shown as that clips everything in that element.

    As you know there are 3 repetitions needed you can do it all with background, using the fact that the first background image given will overwrite the following background image and so on.

    So in this snippet it writes the bottom background first at 100px, the next one at 50x and the last one at 0px,

    Of course you could use %s to make it a bit more general/responsive but if the number of ‘stripes’ required is changed you’ll need to add more background-image.

    <style>
    .bg {
    border: 1px solid red;
    display: inline-block;
    width: 100vw;
    height: 150px;
    background-image: url("https://source.unsplash.com/featured/?nature"), url("https://source.unsplash.com/featured/?nature"), url("https://source.unsplash.com/featured/?nature");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 100px, 0 50px, 0 0;
</style>
<div class="bg">

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search