CODEWITHSUNDEEP
cssimagebackgroundblurry
Josh Keighley
Josh Keighley

Reputation: 225

How to prevent the background image from getting blurry

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

Upvotes: 21

Views: 93502

Answers (6)

Kirill A
Kirill A

Reputation: 517

Try to add:

image-rendering: -webkit-optimize-contrast;

Upvotes: 50

tosh
tosh

Reputation: 5392

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/

Upvotes: 8

Ric Flair
Ric Flair

Reputation: 415

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) */

Upvotes: 12

Nurealam Sabbir
Nurealam Sabbir

Reputation: 365

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

Upvotes: 11

Josh Keighley
Josh Keighley

Reputation: 225

I got it by doing:

background: transparent;

to the h2 and p elements.

Upvotes: -8

RbG
RbG

Reputation: 3193

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

Upvotes: 5

Related Questions