Opacity of div backgrounds


I’m new to coding and I’m a little lost on a certain part. I would like to accomplish the following but i can’t figure out how to change the opacity of the background while leaving the text/image normal. (the following was made in an adobe program)


Currently i have the following code:

  1. (
    )- Doesn’t like some of my code meant to have (div class=“container” inside <>)
  2. <img src="logo.gif"/>
  3. </div>
  4. <div>

with the following in my CSS doc:

  1. .container {
  2. background-color:EFF6E5;
  3. padding: 75px;
  4. opacity:.5;


Would it be better to make the text/image with the opaque background then pulled it in instead?

Set the image in a CSS background, rather than an img tag.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
body {
    font-size: 100%;
.parent {
    height: 240px;
    background: #FEB355 url(bg.png) 0% 0%;
.child {
    position: relative;
    top: 60px;
    height: 120px;
    background-color: rgba(239, 246, 229, 0.6);
.grand-child {
    height: 120px;
    line-height: 120px;
    text-align: center;
    font-size: 3em;
    color: #012CAA;
    background: transparent;
<div class="parent">
  <div class="child">
    <div class="grand-child">
      <h2>Hello World!</h2>

Save the above to your machine and open it in a browser. We have three distinct layers. The parent, the child, and the grandchild. Parent gets the background image; child gets the background opacity, and the grandchild gets the font color.

Thank you. I will look at this now.

You’re welcome.

There is a proviso… There may be ways to do this with less structure. That is a sort of experiment to embark upon when you have a weekend to spend reading and tinkering. I did the above because it was the fast and dirty way to accomplish the desired effect.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.