Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

stephanie harrison roberts
stephanie harrison roberts
1,713 Points
Posted by stephanie harrison roberts
stephanie harrison roberts
1,713 Points

changing the opacity of a background image in css

hi all!

last question of the day......how would I change the opacity of my background image in CSS? when I use the opacity: 0.5; it changes the titles and nav and not the background image. I want to leave the titles alone!

This is my CSS

body{ background-image: url(grafitti.jpg); background-size: cover; background-repeat: no-repeat; max-width: 900px; margin: auto; opacity: 0.8; position: relative; }

Thank you!

11 Answers

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points 
<html>
<head class="main-head">
    <title>Coding Mama</title>
<!--/*title is what shows in the top tab*/-->
            <link rel="stylesheet" href="codingoverbreakfast.css">
            <meta name="description" 
            content="A general guide on the use of meta tags in html pages">
<!--/*meta tags are information about the site, we use there fo search engine purposes*/-->
</head>

  <body>
    <div id="everything">
      <div class="topnav">
        <a class="active" href="#home">Home</a><br>
        <a href="#About">About</a><br>
        <a href="#contact">Contact</a><br>
        <a href="#classes">Classes</a><br>
      </div>

      <h1>CODING&nbsp;&nbsp;&nbsp;&nbsp;<span>Mama</span></h1>

    <div>
  </body>
</html>

body{
background-size: cover;
background-repeat: no-repeat;
max-width: 900px;
max-height: 900px;
margin: auto;
position: relative;
}

}
.topnav{
font-family: bebas;
text-transform: uppercase;
text-align: left;
margin-left: -29px;
margin-top: 15px;
position: absolute;
background-image: url(grafitti.jpg);
opacity: 0,5;
}

a {
text-decoration: none;
color: darkorange;
font-size: 40px;
padding: 60px;
line-height: 2em;
text-shadow:  2px 3px black;
}
a:hover{ 
color: grey;
text-decoration: none;
}
a:active{  
color: grey;
text-decoration: none;
}
h1 {
float: right;
clear: both;
color: white;
font-family: bebas;
font-size: 80px;
margin-right: -10px;
margin-top: 10px;
letter-spacing: 3px;
}
span{
color: darkorange;
}

Add the other <img> properties to the ".topnav" property. Sorry for my english isn't perfect.

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Change the element. For example img tag, id or class. And add 

img{
   opacity: 0,5;
}

But check this and this. Feel free to ask. Hope this help.

stephanie harrison roberts
stephanie harrison roberts
1,713 Points
stephanie harrison roberts
stephanie harrison roberts
1,713 Points

Thanks for your super fast replies!! I'm being thick, but how do i add that when the image is within the body, as in where would i put a class, or an id? steph x

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Add a specific id or class to image. Or you should try this.

body img{
   opacity: ;
}

I am not sure now it's working, just a tip :)

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

I noticed now your second questions. Would you put a class, or an id inside your <img> tag. For example:

<img id="anything" alt=""></img>

or you can use the class name

<img class="anything" alt=""></img>

And inside your css file use this specific property. Like this:

#anything{
   opacity: ;
}

or you can use the class name

.anything{
   opacity: ;
}

Hope this help!

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Try this. Maybe it will help

stephanie harrison roberts
stephanie harrison roberts
1,713 Points
stephanie harrison roberts
stephanie harrison roberts
1,713 Points

not yet.....working on it.....i've changed the image to be in the actual html code instead of the CSS, but then the image is HUGE and takes over the nav etc...so you cant see it, so Ive left it in the CSS as its fine, its only the opacity i wanted to tone down, sure i'll get there.....:)

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Please show your code maybe I can help.

Code
Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

          ```html
          <p>This is code!</p>
          ```
stephanie harrison roberts
stephanie harrison roberts
1,713 Points
stephanie harrison roberts
stephanie harrison roberts
1,713 Points

okay, if you've got the time that would be great! Thanks for this, its much appriciated!

<html>
<head class="main-head">
    <title>Coding Mama</title>
<!--/*title is what shows in the top tab*/-->
            <link rel="stylesheet" href="codingoverbreakfast.css">
            <meta name="description" 
            content="A general guide on the use of meta tags in html pages">
<!--/*meta tags are information about the site, we use there fo search engine purposes*/-->
</head>

<body>

  <div class="topnav">
  <a class="active" href="#home">Home</a><br>
  <a href="#About">About</a><br>
  <a href="#contact">Contact</a><br>
  <a href="#classes">Classes</a><br>
</div>

<h1>CODING&nbsp;&nbsp;&nbsp;&nbsp;<span>Mama</span></h1>


     </body>
</html>

body{
background-image: url(grafitti.jpg);

background-size: cover;
background-repeat: no-repeat;
max-width: 900px;
max-height: 900px;
margin: auto;
position: relative;
}

}
.topnav{
font-family: bebas;
text-transform: uppercase;
text-align: left;
margin-left: -29px;
margin-top: 15px;

position: absolute;
}

a {
text-decoration: none;
color: darkorange;
font-size: 40px;
padding: 60px;
line-height: 2em;
text-shadow:  2px 3px black;
}
a:hover{ 
color: grey;
text-decoration: none;
}
a:active{  
color: grey;
text-decoration: none;
}
h1 {
float: right;
clear: both;
color: white;
font-family: bebas;
font-size: 80px;
margin-right: -10px;
margin-top: 10px;
letter-spacing: 3px;
}
span{
color: darkorange;
}
Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Now I add a extra div for your HTML file.

<html>
<head class="main-head">
    <title>Coding Mama</title>
<!--/*title is what shows in the top tab*/-->
            <link rel="stylesheet" href="codingoverbreakfast.css">
            <meta name="description" 
            content="A general guide on the use of meta tags in html pages">
<!--/*meta tags are information about the site, we use there fo search engine purposes*/-->
</head>

  <body>
    <div id="first">
      <div class="topnav">
        <a class="active" href="#home">Home</a><br>
        <a href="#About">About</a><br>
        <a href="#contact">Contact</a><br>
        <a href="#classes">Classes</a><br>
      </div>

      <h1>CODING&nbsp;&nbsp;&nbsp;&nbsp;<span>Mama</span></h1>

    <div>
  </body>
</html>

Please delete the extra bracket between "body" and ".topnav" and delete the background-image content inside the "body". After the body, add to new div id "first". Like this:

#first{
   background-image: url(grafitti.jpg);
   opacity: 0.5;
}

Hope this help.

stephanie harrison roberts
stephanie harrison roberts
1,713 Points
stephanie harrison roberts
stephanie harrison roberts
1,713 Points

so nearly there....this works great as a header but makes the image large, and only covers the header and it should cover the whole page, any thoughts? x

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

I misunderstood your problem. Delete the "first" div inside the Html, and delete the "#first" content inside the Css. Now add the "first" property to ".topnav". I belive this is the solution on your porblem :D

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Worth put the whole content inside the "<div>". Like this

<body>
  <div id="everything">
    //All content
  <div>
</body>

For example:

<body>
    <div id="everything">
      <div class="topnav">
        <a class="active" href="#home">Home</a><br>
        <a href="#About">About</a><br>
        <a href="#contact">Contact</a><br>
        <a href="#classes">Classes</a><br>
      </div>

      <h1>CODING&nbsp;&nbsp;&nbsp;&nbsp;<span>Mama</span></h1>

    <div>
</body>
stephanie harrison roberts
stephanie harrison roberts
1,713 Points
stephanie harrison roberts
stephanie harrison roberts
1,713 Points

Hi Adam, The kids have decided its supper time here.....and its a rare sunny day in the UK so we're eating out......sadly I shall have to try this later on! I'll let you know how i get on, thanks again for your help, you're a star! steph

stephanie harrison roberts
stephanie harrison roberts
1,713 Points
stephanie harrison roberts
stephanie harrison roberts
1,713 Points

I'm back....so you mean ad the first property like

first.topnav{}

or actually add it into the css somehow?

stephanie harrison roberts
stephanie harrison roberts
1,713 Points
stephanie harrison roberts
stephanie harrison roberts
1,713 Points

Thats brilliant, thanks again. And your English is amazing :)

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Hahaha it isn't true. I happy if the code is working. Happy coding! :)