Old paper background texture with just css

css background textures
Macman picture Macman · Jan 29, 2013 · Viewed 37.4k times · Source

Is it possible to create a background texture with pure CSS (without using an image) that looks like an old paper, e.g. like this: http://i.stack.imgur.com/kb0Zm.jpg

I' aware that there are limitations, the texture does not need to be as complex as the example.

Is there a way to do this in CSS?

Answer

Sridhar Sarnobat picture Sridhar Sarnobat · Dec 1, 2016

Background Image generator site

The best I found in 2016 was this API that creates a noise texture image. It's not based on clever CSS3 but I'm just posting this since none of the other answers achieve what the OP wants anyway.

http://www.cssmatic.com/noise-texture

Note the site has the wrong output CSS code. It should be something like:

body {
    background-image : url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=5c5c5c&density=13&opacity=62);
}

Anyone is welcome to suggest alternative parameters to that API call that look more like paper. I'll update my answer if I come up with a good one.

enter image description here
(source: thumbr.it)

It looks decent on my personal site, and shows you just how unnatural pure white is and how uncomfortable it is on human eyes: http://netgear.rohidekar.com/inventory/books.html

Related questions

CSS3 Radial Gradients with RGBA()

I am working on a website which uses multiple css3 gradients as overlay for a background tiled with texture image site url: --snipped-- currently for header i am using following css: #header { background: #DBD6D3; height: 364px; background: -moz-radial-gradient(50% 0% 0deg,…

Read More
Stretch and scale a CSS image in the background - with CSS only

I want that my background image stretch and scale depending on the browser viewport size. I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More