how can i put a same background image into more then one <div> element individually using css? - Html

rd_nath
March 28, 2023
253 views
2 votes
3 Answers

I am new to in field of web developing. I am learning from internet free resources and courses, so there are no one to solve my subtle problems. I got a task to arrange card deck using HTML and CSS to achieve this type of arrangement

So, I write HTML alike.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>My First page</title>
</head>

<body>

  <div class="card">
    <div class="card2"></div>
    <div class="card3"></div>
    <div class="card4"></div>
  </div>

</body>

</html>

Now in .css file I want to put an card image to all child <div> and want to resize images. How can I do that? I tried this CSS below.

.card {
  width: 200px;
  height: 280px;
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  background-size: 200px 280px;
  position: relative;
  z-index: 1;
}

.card2 {
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  background-size: 200px 280px;
  position: absolute;
  top: 60pxpx;
  left: 50px;
  z-index: 2;
}

.card3 {
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  width: 200px height:280px;
  position: absolute;
  top: 100px;
  left: 80px;
  z-index: 3;
}

.card4 {
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  width: 200px height:280px;
  position: absolute;
  top: 150px;
  left: 150px;
  z-index: 4;
}

Tags: css html

Answers

You have multiple typo in your code as:

top: 60pxpx;

  width: 200px  // your are missing the ';' character
  height:280px;

   <div class="card">
        <div class="card2"></div>
        <div class="card3"></div>
        <div class="card4"></div>
    </div>

I dont think you want to want this way, maybe you just forget to close the first div in time, pay more attention for this kind of errors.

And answer for your question

 .card{

   position: relative;
   z-index: 1;
  
  }
  .card2{

    position: absolute;
    top: 60px;
    left: 50px;
    z-index: 2;
  }
  .card3{

    position: absolute;
    top: 100px;
    left: 80px;
    z-index:3;
  }
  .card4{

    position: absolute;
    top: 150px;
    left: 150px;
    z-index: 4;
  }

  div{
    background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
    width: 200px;
    height:280px;
    background-size:200px 280px;
  }

 <div class="card"></div>
 <div class="card2"></div>
 <div class="card3"></div>
 <div class="card4"></div>

Here is the sort way to achieve this using position property and CSS variable.

.card {
            width: 200px;
            height: 500px;
            background-image: url('https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png');
            background-size: contain;
            position: absolute;
            background-repeat: no-repeat;
            top: var(--top);
            left: var(--left);
        }

<div class="card" style="--top: 50px; --left: 50px"></div>
    <div class="card" style="--top: 100px; --left: 100px"></div>
    <div class="card" style="--top: 150px; --left: 150px"></div>
    <div class="card" style="--top: 200px; --left: 200px"></div>

One approach is below, with explanatory comments to try to show how it works:

// caching a reference to the <div> elements:
const cards = document.querySelectorAll('.cardStack > div'),
  // specifying the offset number:
  offset = 2,
  // specifying the offset units:
  offsetUnit = `rem`;

// iterating over the NodeList of <div> elements, using
// NodeList.prototype.forEach():
cards.forEach(
  // using Arrow function syntax to pass a reference to
  // the current Node of the NodeList, and its index
  // in that NodeList; in the function body we're using
  // CSSStyleDeclaration.setProperty() to set the property
  // of '--offset' to be equal to the result of multiplying
  // the index of the Node by the offset-value, and
  // interpolating that with the value of the offsetUnit
  // variable:
  (card, index) => card.style.setProperty(`--offset`, `${index * offset}${offsetUnit}`)
);

/*
  Using position: relative; on the parent element,
  this allows the absolute-positioned children to
  be positioned in relation to their parent (any
  property-value other than 'static' would achieve
  this):
*/
.cardStack {
  position: relative;
}

/* Here we select all the <div> children of the parent,
   as they're all styled much the same (except for their
   offsets, but we handle that here as well in
   combination with the JavaScript: */
.cardStack > div {
  /* this allows us to specify one dimension of the
     element (we use 'inline-size' here), and sets
     the aspect ratio such that the inline-size is
     two-thirds the size of the block-axis:
     */
  aspect-ratio: 2/3;
  /* defining the inline-size, equivalent to 'width' in
     left-to-right, and right-to-left, languages such
     as English: */
  inline-size: 200px;
  /* splitting out all the background properties,
     specifying the resource to be used: */
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  /* positioning the background in relation to the element
     in which it appears: */
  background-position: 50% 50%;
  /* preventing repeat of the image: */
  background-repeat: no-repeat;
  /* containing the image within the bounds of the
     element: */
  background-size: contain;
  /* positioning the element absolutely, with reference
     to its parent: */
  position: absolute;
  /* setting an inset of zero on the top (first) and
     left (last) sides of the element, and setting
     'auto' on the others: */
  inset: 0 auto auto 0;
  /* using translate to move the element according to
     the calculated offset (in the JavaScript), using
     the var() function and the named CSS custom-
     property: */
  translate: var(--offset) var(--offset);
}

<!-- I've used a slightly less verbose HTML, and given
     the parent-element a more meaningful (to me)
     class-name: -->
<div class="cardStack">
  <div></div>
  <div></div>
  <div></div>
</div>

JS Fiddle demo.

References: