CSS: background image with gradient “overlay”

Question

First, what I wanna accomplish:

• I want this background: http://codepen.io/anon/pen/mJwYye
• With a similar gradient as the one on the image:

(Image' source)

Now, for problems to tackle:

• I'd like the gradient's center to be 100% transparent. I'll have text and other things at the center of the page, so in other words I want no gradient color "blocking" the center of the page.
• I'd like the gradient "overlay" to cover the whole page, instead of each repeat of the image

I tried many different ways to place a gradient over the background image, some worked but without the results I wanted. The only one that worked places the gradient over the image, per every {image} repeat.

This last try won't even work. Not to mention, I am failing to replicate the gradient on the sample image provided:

body {
    background: url('http://www.juvera.me/_img/vista.png') center center repeat,
    radial-gradient(ellipse at center, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 50%,rgba(40,52,59,1) 100%); /* W3C */
    opacity: .8; 
}

Answer 1

It is better to set the different properties one by one, it's easier to check what you are doing.

And the order is the opposite, the elelemnt that you want to overlay must be the first background-image

The first background-size is the one of the gradient, and the second one (30 px) is the size of the repeating pattern. You can adjust it to whatever you want.

 body { height: 100%; background-image: radial-gradient(ellipse at center, rgba(181,189,200,0) 0%,rgba(130,140,149,0) 50%,rgba(40,52,59,1) 100%), url('http://www.juvera.me/_img/vista.png'); background-repeat: no-repeat, repeat; background-size: 100% 100%, 30px 30px; } html { height: 100%; } 

Answer 2

What if you were to have multiple background images. The bottom background image is your repeating pattern, the top is a transparent PNG (PNG-24) with a pre-rendered overlay. This would fade from black 100% to black 0% in the center.

• Multiple backgrounds http://www.css3.info/preview/multiple-backgrounds/

This would mean that you have more control over the gradient, as well as it being slightly less dependent on CSS support. To further increase your browser compatibility, you could have two elements stacked on each other rather than depending on CSS multiple backgrounds, ie:

<div class="pattern">
    <div class="overlay">
        My page
    </div>
</div>