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
  • 301 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Member #1131523

Dani AI

Generated

Using CSS opacity on the parent element will always dim the parent and everything inside it because the browser composites the whole element (background and children) together. That explains why the menu text in ’s first post fades when .container has opacity: 0.2. correctly suggested separating the image from the text layer, and ’s Photoshop idea is a valid fallback; below are two CSS-first approaches that keep text fully opaque while visually reducing the background.

A simple, markup-free approach is to layer a semi‑transparent gradient on top of the background image. The gradient is part of the background and does not affect child elements:

.container {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)),
    url("technology.jpg") center/cover no-repeat;
}

If a separate layer is preferred (closer to ’ pseudo-element suggestion but more robust), use a positioned pseudo-element for the image/overlay and keep the content above it. This allows use of filter (brightness/blur) or a color overlay without altering child opacity:

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

.container::before {
  content: "";
  position: absolute;
  inset: 0;                        /* fallback: top:0; right:0; bottom:0; left:0; */
  background: url("technology.jpg") center/cover no-repeat;
  filter: brightness(0.5);         /* darken without changing child opacity */
  z-index: 0;
  pointer-events: none;
}

.container > .content { position: relative; z-index: 1; }

Checklist/troubleshooting: remove any opacity on the container; ensure .container is positioned (so pseudo-element layers correctly); use pointer-events: none on overlays so links stay clickable; optimize images and test contrast for accessibility. For very old browsers that lack background-size or filter, pre-editing the image (as noted) is the safest fallback.

Recommended Answers

All 2 Replies

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 Member #1131523

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.