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

Home Forums CSS background-image will not change opacity or color

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #263292

    HELLO good people of CSS Tricks.

    I’m a new student learning HTML/CSS/JS and have spend the last few hours (yeah, that long) trying to figure out why this isn’t working in my code:

    1. background-image is set in CSS under body
      * If you see my codepen here you can see the structure of the HTML and the CSS.
      * I found something on both CSS tricks and stack overflow that said that if I created a layer on top of the image I could achieve color change and opacity. Unfortunately, I had to comment that out because it didn’t work.
      * Can someone tell me what I’m doing wrong here? I’ve set background color via rgba with an opacity setting in the body where the background-image is linked but this has no effect on the image.
    2. Bonus question-I’ve also commented out a background-image url beneath the functioning one.
      * This links to an image on my imgur-but the link doesn’t work.
      * I’ve wracked my brains trying to figure out why but the syntax is correct, etc and I have links to other images in my imgur that appear just fine elsewhere.
    3. edit-bonus bonus question–what am I doing wrong here in markdown? I referenced the markdown link below (and it’s the same as what I use on github) but none of the formatting took?

    Thank you for reading–again, I’m new to this so if I’ve left anything out, please let me know.
    -a grateful student.


    You have it mostly right (you can’t affect the opacity of a background-image) only an element (or pseudo-element).

    Unfortunately, changing the opacity also affects the stacking order (z-index) so you have to tell the background layer so be one level down (z-index:-1)

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