How to make css background-size scale linearly?

Question

So when I scale a background image in CSS3, using the background-size property, like this:

.one {
    background-image: url(sprites/1.png);
    background-size: 100% 100%;
}

then it scales the picture: Like this

How can I make it so the picture is not blurred like that? Is it possible without a higher resolution image?

I'm not sure if I get the point. Do you want to scale up a picture above its resolution? — matewka, Feb 26 '14 at 18:46
possible duplicate of [How to stretch images with no antialiasing](http://stackoverflow.com/questions/8597081/how-to-stretch-images-with-no-antialiasing) — bjb568, Feb 26 '14 at 18:47

score 1 · Answer 1 · answered Feb 26 '14 at 21:38

1

If the whole background image is purely just a black line, as shown, before you save the image, change it to an indexed image (instead of RGB), and give it an index of only two colours. That way there will be no blur (antialiasing) and it will scale perfectly well. It will also make your background image a very tiny file size, which helps for quick loading. Save the indexed image either as png, or gif.

answered Feb 26 '14 at 21:38

Josh Moore

176
1
5

Don't know if this actually works or not, but it's a good idea! – Timothy Miller Mar 23 '15 at 18:37

score 0 · Answer 2 · answered Mar 21 '16 at 23:21

Alternatively you could use a image type like SVG which handles scale operations.

https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Though the SVG Specification primarily focuses on vector graphics markup language, its design includes the basic capabilities of a page description language like Adobe's PDF. It contains provisions for rich graphics, and is compatible with CSS for styling purposes. SVG has the information needed to place each glyph and image in a chosen location on a printed page

How to make css background-size scale linearly?

2 Answers2