How do i set a background image for a division with an image already in it?-CodePudding

I've ran out of hope for this for the past few days,what I'm basically trying to do is to do this:

CSS:

.div1{
/* background-image code */
}

HTML:

<div >
<!--Image here-->
</div>

Is it even possible to have a background image larger than the image in the div itself?

CodePudding user response：

See the following example to achieve what you are looking for. Basically you can combine a color and an image by using both the background-color and background-image props at the same time. Position and scale the image with background-size and background-position. background-repeat: no-repeat; is important to be able to see the area that is the simple color background.

.div1 {
  background-color: blue;
  background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  
  width: 400px;
  height: 300px;

}

<div >
</div>

For two images layered in this way:

.div1 {
  background-image: url(https://www.realtree.com/sites/default/files/styles/site_xl/public/content/inserts/2022/imagebybarriebird-ducklings.jpg);
  width: 400px;
  height: 300px;
  position: relative;
  color: white;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  /*to center the text */
  display: flex;
  align-items: center;
  justify-content: center;
}

.div1::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
  background-size: cover;
  /*to set this image layer behind the duck one */
  z-index: -1;
}

<div >
  Example content text
</div>

CodePudding user response：

you can add width and height in each img and background-image

.div1{
    width: 100vw;
    height: 500px;
/* background-image code */
}

img {
   width : 200px;
   height : 200px;
}

<div >
    <img src="code.png" alt="">
    <!--Image here-->
</div>