CODEWITHSUNDEEP
css
Stef Blokdijk
Stef Blokdijk

Reputation: 39

transparent overlay background image CSS

I Have a background image full screen, but i want a black overlay on it with a opacity of 0.7

This is my code:

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 do i do this?

My html 

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<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>

The over has to be an opacity overlay.

Upvotes: 3

Views: 42991

Answers (2)

Kartik Chauhan
Kartik Chauhan

Reputation: 3068

You can also work it out using the following technique:

background-color: black; /* The shade of black that you want*/
background-blend-mode: multiply;

Upvotes: 1

Anobik
Anobik

Reputation: 4899

Use a div and assign a class transparent covering entire body then use: 

.transparent {
    background:rgba(255,255,255,0.5);
}

which will do the task.

Also go through: w3 school image transparency and overlay

Upvotes: 9

Related Questions