Forums

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 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #263294
    codingstudent
    Participant

    apologies if this is a duplicate-I posted this a few minutes earlier and tried to edit it to fix the markdown and it somehow disappeared

    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. I’m trying to change the color and opacity of the image so that the text in the welcome div is more readable.

    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.

    #263295
    Paulie_D
    Member

    I’m not clear on what it is you are trying to do.

    You can’t affect the opacity of a background image….only a background color (as you say using RGBA).

    #263297
    Paulie_D
    Member

    What you can do is use a pseudo-element and affect the opacity of that/

    https://codepen.io/Paulie-D/pen/MOLRYQ?editors=1100#0

    #263298
    codingstudent
    Participant

    Hi–I’ve edited my question for clarity. Thanks.

    #263302
    Shikkediel
    Participant

    There a typo, for one. It says rbba

    #263307
    codingstudent
    Participant

    @shikkediel fixed and doesn’t fix the issue. additional ideas?

    #263308
    codingstudent
    Participant

    @Paulie_D

    Thanks for the constructive reply.
    Does the * in the first line of the CSS function as a wildcard?
    MDN docs on pseudo-elements for CSS doesn’t mention it and I checked several other google searches.

    Thanks again!

    #263311
    Shikkediel
    Participant

    The opaque background colour is there but as Paulie mentioned, it does not affect the image itself. They are a stack of two layers of background.

    https://www.w3schools.com/cssref/sel_all.asp

    By the way, you imgur image seems to link fine. And blocks of code can be created by either using one tilde around a word/phrase or three in a row to create a larger section:

    Like this one
    
    #263312
    codingstudent
    Participant

    @shikkediel

    thank you.
    new info on the * selector (!!!) that seems in line with the info on w3 and stack overflow though those solutions involved creating a new div rather than a pseudo-element (pseudo element seems cleaner, right?) I tried the additional layer in my original code but couldn’t really figure out why it wasn’t rendering the way I’d intended.

    not sure how you embedded the the div above–would you mind sharing the code? I don’t think (in my brief time doing this) I’ve yet come across ~~~

    funny about the imgur link I still can’t get it work using my imgur link.

    Thank you both @paulie_d and @shikkediel for your time.

    #263313
    Shikkediel
    Participant

    Sorry, some minor misinformation there. It’s actually the backtick character below the tilde…

    And yes, a pseudo element is the nicer approach in my opinion too.

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