Learn the steps to create a vertically tiled background using a clipped image

My goal is to create a vertically tiled background by clipping the top 50px of a background image and using only that portion. However, the code I have below isn't working as expected. Even though I've given a higher z-index to the 

<div class="content">
, it's also being clipped. Additionally, the clipped part of the image isn't repeating.

I did manage to get the desired result by removing comments in the code (like here: https://jsfiddle.net/jamacoe/1ej3k80o/3/), but that involved duplicating the 

<div class="clipped">
container. Is there a way to achieve this with just a single 
<div class="clipped">
container with a height of 100%? Any insights or alternative approaches are much appreciated. 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>

cssbackground-imageclip

Answer №1

It is not possible to achieve this effect using a clip-path because it will clip everything within the element.

However, you can achieve the desired result by using background properties. By setting multiple background images and adjusting their positions, you can create the illusion of stacked layers.

In the code snippet below, the background images are stacked from bottom to top with positions set at 100px, 50px, and 0px respectively.

For a more responsive design, you can use percentages instead of fixed pixel values. Just keep in mind that if the number of 'stripes' changes, you will need to add more background images accordingly.

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

Answer №2

While it may not be the most conventional method and may not align perfectly with your vision, you have the option to create multiple images manually using a design software such as Figma, and then randomly display them on your site using JavaScript. Simply create a list of CSS classes, each with a different background-image, and use math.random() to select one at random.

Downloading images directly from the website could potentially impact the performance since Unsplash images are in .jpg format. Consider using faster .webp images instead by converting them through a tool like here, for improved efficiency.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loading CSS files conditionally in Angular2's index.html

Currently, my index.html page features a dark theme: <base href="/"> <html> <head> <title>XXX</title> </head> <body> <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> <my-app ...

javascripthtmlcssangular

I'm throwing in the towel on CSS, I just can't seem to get a simple button to sit at the bottom of

Struggling to position a button at the bottom of a div? I've tried everything I could find online but nothing seems to work! Here's my code: <ion-col > <div id="secondCol"> <ion-text> {{card.cardPo ...

htmlcssbuttondivision

Tips for centering links in the navigation bar on Bootstrap 5 when viewing in a small size

I had previously inquired about customizing the Bootstrap 5 navbar in this post: Adjust navbar height to be smaller and I received some helpful answers. Thank you to everyone who responded. However, I now have a follow-up question: I am interested in ch ...

cssbootstrap-5

Prolong the ultimate position of the initial animation for the translated object

I understand that this question has been asked multiple times before, but I am seeking a fresh approach to these animations. Issue: The second box contains multiple animations, and I am trying to achieve the same effect as the first one. However, it seem ...

csscss-animationscss-transforms

Position the paper-icon-button so that it is aligned to the top-right corner of the scaffold

Looking for a way to... <core-scaffold id="core_scaffold"> <core-header-panel mode="seamed" id="core_header_panel" navigation flex> <core-toolbar id="core_toolbar"></core-toolbar> <core-menu valueattr="label" ...

htmlcsspolymer

Creating a Google Captcha with validation is a straightforward process that can enhance the

I am having issues with adding Google Captcha to my form. Despite all fields working properly, the Captcha integration seems to be causing some disruptions. I have included my code below. Thank you in advance for your help. Please also check the following ...

javascriptjquerycsshtmltwitter-bootstrap

What is the process for incorporating a scrolling feature into my HTML page?

I need to display the following content on my website: What code do I need to add in order to achieve this? I tried using the code snippet below but it did not work as expected: <td nowrap align="left" style="word-wrap: break-word"><pre style="w ...

htmlcss

The TextField component in MUIv5 is showing some frustrating white space in the corners

I've integrated the MaterialUI_v5 library and included a TextField component within a Paper component. The background of the Paper component has been customized to appear in a shade of green. For the Textfield component, I have applied a styling tha ...

cssreactjsmaterial-ui

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

I have been extensively researching how to create a to-do list using JavaScript with local storage, but unfortunately, I have not been able to find exactly what I am looking for. Is there a way for me to set up a to-do list and input data before actually ...

javascripthtmlcsslocal-storage

Persistent banner designed to accompany blog posts

I've been attempting to insert a banner ad that runs along the left side of my blog post. Unfortunately, all my efforts so far have caused it to display above the content, pushing the blog post down the page. You can view the live link here. Here i ...

htmlcsswordpress

Eliminating white space - A CSS and HTML page with no room for gaps

After finally getting my website up and running using style.css, I am faced with the following CSS code: html { height:100%; } { position: relative; z-index: 0; width: 100%; left: 0; top: 0; cursor:default; overflow:visible; } body { ...

htmlcss

I'm attempting to create a dropdown menu, but I'm struggling to keep it open when I hover over an option

Seeking assistance as a beginner in coding. I am struggling with creating a dropdown menu option on my website. The issue is that the menu closes whenever I attempt to move my mouse to select other options. It seems to work fine when using the run option h ...

htmlcss

jQuery Mishap - Creating an Unspecified Issue

At the moment, my website displays a list of registered users in one column and their email addresses with checkboxes next to them in another column. Users can check the boxes and then click a submit button to generate a list of the selected emails separat ...

javascriptjqueryhtmlcss

Steps for aligning an image to the right using Bootstrap Vue

I'm currently learning Bootstrap Vue and I'm trying to align an image on the right using a b-card header. The challenge I'm facing is that when I add the image, it disrupts the perfect size of the template header, causing the image to show a ...

cssvue.jsbootstrap-4bootstrap-vue

Tips on increasing video size upon visiting a website. HTML, JavaScript, and potentially jQuery can be used for video animation

Is there a way to create a video pop-up in the same window when visiting a website? I want the video to increase in height from 0 to a specific height and move slightly upwards. Are there JavaScript or jQuery functions that can achieve this effect? I wou ...

javascriptjqueryhtmlcss

Easy ways to manipulate the style of array components in Vue.js

Hey there all you programmers, I'm reaching out to see if any of you have insight on how I can modify the style of a specific component within an Object array. This is the code snippet: <template> <div> <ul> <li v-fo ...

javascripthtmlcssvue.jsvue-component

Achieve a centered content with a stretched background using Bootstrap 5

Having some trouble with aligning items in a div using align-items-stretch to stretch the background and align-items-center to vertically center the content. It seems that the alignment issue occurs when there's a very long title present. https://i.s ...

cssbootstrap-5

Animation scaling on the iPhone seems to abruptly jump away once it finishes

Encountering an issue with animations that is causing unexpected behavior on physical iPhone devices but not in the simulators. The problem arises when the background zooms in and then the div suddenly jumps to the left after the animation completes, as sh ...

cssreactjstypescriptanimationstyled-components

Encountered a parsing error when attempting to integrate SCSS with webpack and babel setup

I am facing an issue while trying to integrate SCSS into my webpack and babel setup. When running npm run build, I encounter an error that I'm unfamiliar with. As a beginner in using webpack and babel, I'm unsure about the necessary changes requ ...

javascriptcsswebpacksassbabeljs

Differences between CSS Display None and Collapse

Can you explain the distinction between the following two options? display: none; visibility: hidden; I always thought that visibility: collapse was only applicable to tables. Am I mistaken? ...

htmlcss