CODEWITHSUNDEEP
htmlcss
RoboPHP
RoboPHP

Reputation: 420

How to set background image for div

I have 3 horizontally aligned images. I set a background image (background image) for the aligned images as below. When I run my code, the background image flows over the images. I want the 3 aligned images to appear on top of the background image. I tried to use box-shadow which couldn't work. I don't want the background image to cross over any of the 3 aligned images. How do I do this please?

HTML

<div class="col-lg-12">
    <img src="images/background.png" alt="Change">
    <div class="img">
        <div class="column-img">
            <img src="/images/pic.jpg" alt="" width="426" height="479">
        </div>
        <div class="column-img">
            <img src="/images/pic.jpg" alt="" width="425" height="479">
        </div>
        <div class="column-img">
            <img src="/images/change.jpg" alt="" width="426" height="479">
        </div>
    </div>
</div>

CSS

//how I align my 3 images horizontally.
.column-img {
    float: left;
    width: 33.33%;
    padding: 5px;
}

Upvotes: 0

Views: 133

Answers (2)

Ryuno-Ki
Ryuno-Ki

Reputation: 800

Hm, so you want the background.png to appear behind the other images? If you insist on having it within the DOM, you'd need to remove it from the document flow. Something like this:

.column-img {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.background-anchor {
  position: relative;
}
<div class="col-lg-12 background-anchor">
  <img class="background" src="https://placekitten.com/1300/1300" alt="Change">

  <div class="img">
    <div class="column-img">
      <img src="https://placekitten.com/426/479" alt="" width="426" height="479">
    </div>
    <div class="column-img">
      <img src="https://placekitten.com/425/479" alt="" width="425" height="479">
    </div>
    <div class="column-img">
      <img src="https://placekitten.com/426/479" alt="" width="426" height="479">

    </div>
  </div>
</div>

Upvotes: 2

Ahmed Ramadan
Ahmed Ramadan

Reputation: 33

css :

.img {
   background-image: url('../images/pic.jpg');
}

this is the right way to put a background image in css get more information from : W3school

Upvotes: 0

Related Questions