'The image in an HTML file is very blurry and out of focus

I am working on an html file. I want to display an image across the entire page in a div with a height of 200 px. The image is quite big, so it should occupy the width of the page without any repeat. The size of the image is 5760 X 3840 pixels. The following is how I have styled my div:

<div style="background-image: url('C:/MyFolder/MyImage.jpg');background- repeat:no-repeat;height:200px;width:100%; image-rendering: -webkit-optimize-contrast"> </div>

The problem is that the image shows up very blurred. As shown in the code I even used the image-rendering attribute, but didn't help.

Thanks

htmlcss


Solution 1:[1]

You can instead of setting background img for the div you can add a img inside the div and make it stretch to the size of the div then using z-index make it appear as a background image(be sure to include position relative or else z index won't work). Setting background of a div is good if the image is the same size as the div else it never looks right.

    <style>
      .background-img {
          height: 100%;
          width: 100%;
          position: relative;
          z-index: -1;
     }
   </style>
   <div> 
     <img src='/your-image' class='background-img'/>
   </div>

Or possibly a solution you could try with your example is adding background-size cover to your styles.

 <div style="background-image:      url('C:/MyFolder/MyImage.jpg'); background- repeat:no-repeat; height:200px; width:100%; image-rendering: -webkit-optimize-contrast; background-size:cover"> </div>

Hope this may look better

Solution 2:[2]

Solution 1:

If you are comfortable to replace div with img tag. Then your code becomes

    <img src="your-image.jpg" class="customImgSize"/>

Then apply the styles like

    .customImgSize {
     width: auto;
     height: 200px; /* your custom height */
    }

Solution 2:

You can achieve the result by using an img tag. Then wrap the img tag with a div.

    <div class="imgContiner">
      <img src="your-path-to-image" class="flexibleImg"/>
    </div>

And your CSS becomes

    .imgContainer {
      width:auto; 
      /* you can use max-width/min-width to define the widths for all */ 
      resolutions
    }

    .flexibleImg {
      width: auto;
      height: 200px; /* Apply your height */
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 JUDE DAILY

Related Questions