I am trying to add a black overlay with an opacity of 0.7 to a full-screen background image.
This is the CSS code I currently have:
body {
background:url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
How can I achieve this effect?
Here is my HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>New Year Countdown</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<div id="over">k</div>
</body>
</html>
I want the "over" div to act as an opacity overlay on top of the background image.