Question 244850 in Html Question posted in
Some basic documentation can be found here.

Html – Image is not showing in full background

I want to place an image as background to a div. The image size is 5568×3712 but still the background-size:contain is not placing the whole image as background.See the below screenshot:
enter image description here

The image is not covering the right side of the div. Below is my CSS code:

.heroSection{
  background-image: url('../../public/hero-section.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-color: rgb(148, 145, 145);
  background-blend-mode: multiply;
  flex-grow: 1;
}

I don’t know why it’s not covering the whole div. I searched for a solution but nothing worked. Does anyone have idea what I am doing wrong here?

Thanks in advance.

Tags:

2

Answers


  1. 0

    It is expected. You may reference the MDN document about different background-size.

    If you want the image to cover the whole HTML div, you can use "background-size: cover" instead. The down side is that unless the div is exactly the same size as the div, part of the image will be outside of the div.

    contain
    enter image description here

    cover
    enter image description here

    Login or Signup to reply.
  2. 0

    try this:

    yourelement{
background: url(yourimage.jpg) no-repeat center center fixed;
    background-size: cover; 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search