I have tried to implement a custom CSS design using the background image bg.jpg with a pattern of dots.png that repeats both horizontally and vertically.
*{
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;
}
After setting up the CSS, I created an index.php file with the following structure:
<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>
However, the pattern is not showing correctly on the webpage. Can anyone provide guidance on how to fix this issue? Your help would be greatly appreciated.