CODEWITHSUNDEEP
htmlcss
Imrul.H
Imrul.H

Reputation: 5870

CSS3 responsive background image gets blurry

I am using png image as background of the td inside a table. I am using "background-size: cover" to make it responsive. But the background image gets blurry on smaller windows. Its fine on full size. Is there any way to prevent this?

<table>
  <tr>
    <td style="background-image: url(image.png)">
      <div></div>
    </td>
  </tr>
</table>


css:
table td{
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 96px;
}

Upvotes: 0

Views: 2135

Answers (4)

wntsmk
wntsmk

Reputation: 330

The problem is not the bakcground-size roule, the proglem is the background-position:center. Try to change the image-rendering css roule.

Upvotes: 0

Eternal1
Eternal1

Reputation: 5625

If you want to do it in a responsive way, you may consider using a smaller image on a smaller screens, with media queries -

HTML:

<table>
  <tr>
    <td class="background-one">
      <div></div>
    </td>
  </tr>
</table>

CSS:

table td {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 96px;
}

.background-one {
    background-image: url('image-1.png');
}

@media all and (max-width: 420px) {
    .background-one {
        background-image: url('image-1-small.png');
    }
}

Upvotes: 0

kasimir
kasimir

Reputation: 1554

No.

The PNG image is pixel-based. Scaling it makes it blurry, whatever you do. Perhaps you're watching the image on a smartphone with high resolution display, and it will be even worse.

The only real solution for this is using vector graphics, like SVG images.

Upvotes: 4

John V
John V

Reputation: 855

May be set table width?

table {
    width: 100%;
}

Upvotes: -1

Related Questions