CSS: How to apply a background tiled image and a radial gradient over it at the same time?

Question

I've seen these answers already: this, this, this and this.

But it didn't help.
My program is here: http://jsfiddle.net/nav9/6VeB7/9/

Two questions:
1. Does it make sense to have such background code placed within the html tag or the head tag instead of inside the body tag?
2. How do I get a gradient over the background image? It works fine when I place the background image in the html tag and the gradient in the head tag, but I want both in the same tag.

The CSS:

body 
{
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
    /*background: radial-gradient(rgba(45,255,27,0.8), rgba(255,162,12,0.87), rgba(14,12,12,1));*/
    background: radial-gradient(rgba(45,255,27,0.8), rgba(255,162,12,0.87), rgba(14,12,12,1));/*, url("images/starTile.png") repeat;*/
    background-image: url("images/starTile.png") repeat;    
    position: fixed;
}

The HTML:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<link rel="stylesheet" type="text/css" href="Styles.css">
</body>
</html>

UPDATE:
This is the reason it's not a duplicate: I'm trying to repeat the starTile, and the gradient doesn't work when I use repeat. But if I use no-repeat, I can see the gradient as well as a single starTile image.

body
{
    background-image: url('images/starTile.png'), radial-gradient(rgba(45,255,27,0.8), rgba(255,162,12,0.87), rgba(14,12,12,1));
    background-repeat: repeat, no-repeat;
    background-position: left center, left top;
    background-size: auto, 100% 100%;
}

This - http://stackoverflow.com/questions/17417032/no-repeat-background-image-and-gradient-same-time gives you your answer. Comma separate ALL of the background properties and do NOT use the shorthand. — Paulie_D, Jun 09 '14 at 11:05
@Paulie_D How do I add actual images to the fiddle? Didn't find any option to do so. I'm new to JSFiddle. — Nav, Jun 09 '14 at 11:11
Also, put your link tag within the head. Also, in your CSS, the background-image rule will have no affect on the first background rule. @Nav JSFiddle doesn't host images. You need to put them online somewhere first (like a dropbox account). — evolutionxbox, Jun 09 '14 at 11:11
@evolutionxbox My link tag was initially in head, but JSFiddle showed me a message asking me to not include the head tag because it is already part of the output. — Nav, Jun 09 '14 at 11:13
@Nav http://stackoverflow.com/questions/13172762/adding-images-in-jsfiddle — Mr. Alien, Jun 09 '14 at 11:14
@Nav You have to put them online and link them in. I use photobucket.com or use an dummy image site like lorempixel.com — Paulie_D, Jun 09 '14 at 11:16
@Nav: See your fiddle again: http://jsfiddle.net/abhitalks/6VeB7/8/ — Abhitalks, Jun 09 '14 at 11:20
Guys, this isn't a duplicate question, because in my question, I'm trying to repeat the background image, which is what makes the gradient not appear. In the other questions, they're not repeating the background image. I've updated the question with the code. — Nav, Jun 09 '14 at 11:32

CSS: How to apply a background tiled image and a radial gradient over it at the same time?

0 Answers0