How to Prevent the Background Image from Getting Blurry

CSS background image is rendered blurred and not entirely

It seems you are using a too small version of the picture which becomes blurry when it's enlarged beyond its own size.

Use a larger version if possible: That's a stock photo from pixabay or something, isn't it? Go there and look if there is a larger version available (usually there is), and use that instead.

BTW: I reread the question: You say you are missing parts of the coffe cup and the notebook display: That's due to the different width/heigth proportion of the image part that is displayed. This happens automatically when you use background-size: cover to fill the whole available space with the background image. (The first part of my answer referred to the blurryness)

CSS background-size:cover getting blurry and dull in Chrome

Try adding this to the code:
image-rendering: -webkit-optimize-contrast;
For me it did the trick perfectly.

CSS Background url image looks blurry in bigger resolution but looks sharp in smaller screen resolution

If you want to insert an image in a different resolution without it becoming blurred, then you must choose an image in SVG format and not PNG or JPG. With Inkscape (https://inkscape.org/) you can even create your own image in SVG format.

How do i make the background image blurry without affecting the top content?

If possible I would suggest to split up the parent element clan-profile and the background image.

You could do something like:

<section id="clan-profile">
  <div class="clan-image"></div>
  <div class="container">
    <div class="row pt-4 pb-4">
      <div class="col-12 col-md-6">
        <div class="row pb-1">
          <div class="col-12">
            <h2>Lorem Ipsum</h2>
            <h5>Lorem Ipsum</h5>
          </div>
        </div>
...

Then you could do the following css:

.clan-image {
  background-image: url("...");

  /* Add the blur effect */
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

Then you have a decision to make. You can either make the image absolutely positioned, or you can make the content absolutely positioned. Another solution is to use css-grid, and position the elements on top of each other, because grid allows for this.

---

Related Topics