How to prevent the background image from getting blurry

Question

I need to know how to get the background image to not be blurry when text is over it in CSS as it spoils the look of my website if it's blurry.

My CSS is:

background: #ff0000 url(img/rain.jpg) top center repeat-y; 
background-size: 100%;

But when I load it up where there is text that line goes blurry and I don't want it to so how do I do this?

Fiddle example

My code is: background: #ff0000 url(img/rain.jpg) top center repeat-y; background-size: 100%; But when I load it up where there is text that line goes blurry and I don't want it to so how do I do this? — Josh Keighley, Sep 07 '13 at 21:20
put the code in question not in comment ...and if posible give us a live example in jsfiddle.net — RbG, Sep 07 '13 at 21:22
@JoshKeighley the code you pasted is nice. But sadly, not relevant. The relevant thing would be to see what is with the text part that is there. By blurry do you mean "get grayish under the text"? It could be that you have a div whose background is not entirely transparent, but say just 50%. You could easily see what is going on, and be also able to correct it using tools like the CSS tools in Firebug... — ppeterka, Sep 07 '13 at 21:25
JSFiddle: http://jsfiddle.net/jmkeighley/59ELc/ See the way it gets blurry behind where the text is? — Josh Keighley, Sep 07 '13 at 21:34

score 51 · Answer 1 · edited Mar 15 '20 at 16:23

51

Try to add:

image-rendering: -webkit-optimize-contrast;

edited Mar 15 '20 at 16:23

Andrew Tobilko

48,120
14
91
142

answered Feb 12 '16 at 13:45

Kirill A

519
5
13

They should have it inbuilt in the browser with this feature . Why would someone want their images blurred. Duh – manish kumar Sep 05 '17 at 05:27
1

it will look terrible if you are scaling down the image with this answer – Jeffrey Neo Feb 12 '18 at 21:56

score 12 · Answer 2 · answered Aug 15 '18 at 17:48

Here's the cross browser technique:

 image-rendering: crisp-edges;
 image-rendering: -moz-crisp-edges;          /* Firefox */
 image-rendering: -o-crisp-edges;            /* Opera */
 image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
 -ms-interpolation-mode: nearest-neighbor;   /* IE (non-standard property) */

score 11 · Answer 3 · edited Oct 26 '16 at 08:10

11

Try adding this to the code: image-rendering: pixelated; For me it worked perfectly. you can also try - image-rendering: -webkit-optimize-contrast;

edited Oct 26 '16 at 08:10

Petter Friberg

21,252
9
60
109

answered Oct 26 '16 at 08:07

Nurealam Sabbir

365
3
4

score 6 · Answer 4 · answered Jul 03 '19 at 12:44

You can use image-rendering: pixelated. Here is an example from the Mozilla Developer Network:

.pixelated {
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

https://jsfiddle.net/9dtj2wkq/

RbG · Answer 5 · 2013-09-07T21:44:51.930

5

use of background-size: cover;background-position:50% 50%; will help you..

* {
font-family: Calibri, Comic Sans MS, Serif;
background: #ff0000 url(http://www.coolguysite.co.uk/blog/templates/default/img/rain.jpg)   top center repeat-y;
background-size: cover;
background-position:50% 50%;
}

UPDATED FIDDLE

edited Sep 07 '13 at 21:44

answered Sep 07 '13 at 21:39

RbG

3,181
3
32
43

score -8 · Accepted Answer · edited Oct 11 '14 at 19:33

-8

I got it by doing:

background: transparent;

to the h2 and p elements.

edited Oct 11 '14 at 19:33

Nakilon

34,866
14
107
142

answered Sep 07 '13 at 21:57

Josh Keighley

215
1
2
7

15

How does transparent background prevent the background image from getting blurry ... – trainoasis Mar 12 '18 at 13:38

How to prevent the background image from getting blurry

6 Answers6

Linked