CODEWITHSUNDEEP
htmlcss
Harikrishnan
Harikrishnan

Reputation: 8065

Overlay a background using pattern in CSS

I have used the following css file to over background bg.jpg with a repeat-x repeat-y pattern of dots.png.

*{
    margin: 0;
    padding: 0;
}
body {
    margin: 0px;
    padding: 0px;
    color: #666;
    font-family: comfortaa;
    font-size: 13px;
    line-height:1.5em; 
    background-color: #fff;
    width: 100%;
    height: 100%;
    background: url(../images/bg.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#header {
    width: 100%;
    height: 17%;
    background: url(../images/header.png) no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
#dots{  
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:transparent url(../images/dots.png) repeat-x repeat-y top left;
    opacity:0.6;
}

Then I wrote the index.php like this:

<html>
<head>
    <title>My test page</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<body>
   <div id="header"></div>
   Under Construction
   <div id="dots"></div>
</body>
</html>

But the pattern is not overlaying. What can I do to resolve this? Please help.

Upvotes: 0

Views: 16259

Answers (3)

Liyan Chang
Liyan Chang

Reputation: 8051

Change: 

background:transparent url(../images/dots.png) repeat-x repeat-y top left;

to:

background:transparent url(../images/dots.png) top left;

The default behavior is to repeat both x and y; giving it both parameters is actually incorrect.

Here's a JSFiddle to see it in action: http://jsfiddle.net/XsDjy/

Upvotes: 2

shannon
shannon

Reputation: 8784

It's just { background: repeat; }, not -x and -y.

http://jsfiddle.net/XNeDK/

Upvotes: 1

Andrea Turri
Andrea Turri

Reputation: 6500

Height: 100% is like 0px if you don't fill something inside the div... so I suggest you to give a fixed height, 1px as well will be enough to see the dots.

Upvotes: 1

Related Questions