Member Avatar for Jawad.ali

I have a HTML page with a background image. I am trying to change the opacity of my background image but it is also affecting my child text. I tried many method like opacity, rgba etc but havent got hold of that. If some one can help me out i will be thankful.

CSS CODE:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);

.container{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-image: url('/images/technology.jpg');
    opacity: 0.2;
}

.content {
    position: relative; 
    z-index: 2;
    opacity: 1;
}​
#menu{
    background: #ffffff;
    width: auto;
    position: relative;
    left: 200px;
    right: 200px;
    top: 20px;
    bottom: 20px;
}

.ribbon {
    position: relative;
    overflow: hidden;
}



#menu ul{
    margin: 0;
    padding: 0;
    zoom:1;
}
#menu ul:after{
    content: " ";
    display: block;
    visibility: hidden;
    font-size: 0;
    height: 0;
    clear: both;
}

#menu ul li{
    display: block;
    float: left;
    padding: 0 10px;
}
#menu.align-right ul li {
  float: right;
}
#menu.align-center ul {
  text-align: center;
}
#menu ul li a{
  color: #000080;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#menu ul li a:hover {
    color: #000080;
}
#menu ul li a:hover:before {
  width: 100%;
}
#menu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}

#menu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#menu ul li.last > a:after,
#menu ul li:last-child > a:after {
  display: none;
}
#menu ul li.active a {
  color: #333333;
}
#menu ul li.active a:before {
  width: 100%;
}
#menu.align-right li.last > a:after,
#menu.align-right li:last-child > a:after {
  display: block;
}
#menu.align-right li:first-child a:after {
  display: none;
}
@media screen and (max-width: 768px) {
  #menu ul li {
    float: none;
    display: block;
  }
  #menu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fb998c;
  }
  #menu ul li.last > a,
  #menu ul li:last-child > a {
    border: 0;
  }
  #menu ul li a:after {
    display: none;
  }
  #menu ul li a:before {
    display: none;
  }
}
#image  {
    text-align: center;
    display: block;
    margin: 0 auto;
}
.ribbon{
    position: top;
    text-align:center;
    display:block;
    top: 0;
    right: 0;
}

HTML CODE:

<html> <head> <title>Test</title> <link href="StyleTemplate1.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container"> <div class="content"> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Map</a></li> </ul> </div> <!-- <div id ="image" class="ribbon"> <img src='/images/homepage.jpg' class="ribbon" width="1000" height="500" /> </div> --> </div> </div> </body> </html>
  • 3 Contributors
  • 2 Replies
  • 286 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by godfreysseki
Member Avatar for hericles

Opacity affects the element it is being applied to (obviously) so adding opacity to the div will affect it's background image and everything else inside it, which includes the text.
But you have some options:
1) Use your favorite graphics software to make the image itself transparent and don't use opacity at all
2) Restructure your div to include two other divs, positioned absolutely over each other with differing z-indexes, the top with the text and bottom one with the image and some opacity
3) add a pseudo element (:after) that holds the image and apply opacity to that.

example:

div {
  width: 300px;
  height: 300px;
  position: relative;
}

div::after {
  background: url(background.jpg);
  opacity: 0.7;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;   
}
Member Avatar for godfreysseki

What happens, you cannot reduce the opacity of the image alone but what you can do, is to reduce its opacity from photoshop then transfer it back.

Opacity works best with the background color only.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.