Changing the opacity in the CSS isnt working for me!

[stephie101blue]

Hi All,
Im trying to change the opacity to the background image i’ve put in the CSS (as posted below) but when i add the opacity to the body, where the background image is, it changes the nav, which I dont want it to do. Anyone see where Im going wrong?

Thanks in advance!
steph

body {
    background-image: url(grafitti.jpg);
    background-position: center top;
    background-size: 100% auto;
}

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

}

.topnav a{
text-decoration: none;
color: darkorange;
font-size: 40px;
padding: 60px;
line-height: 2em;
text-shadow:  2px 3px black;
}
.topnav a:hover{ 
color: grey;
text-decoration: none;
}
.topnav 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;
}

[Paulie_D]

You can’t affect the opacity of an actual background image.

Opacity affects elements and background image is a style.

https://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity

[stephie101blue]

Okay, got it….thanks for letting me know that. I’ll try and put the image as an element into the html and see how that works out!

thanks again!

[Author]

Posts