Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Changing the opacity in the CSS isnt working for me!

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #271517
    stephie101blue
    Participant

    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;
    }
    
    #271521
    Paulie_D
    Member

    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

    #271522
    stephie101blue
    Participant

    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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.