Give help. Get help.

  • # December 3, 2017 at 1:06 pm

    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.

    # December 3, 2017 at 1:37 pm

    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).

    # December 3, 2017 at 1:46 pm

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

    # December 3, 2017 at 1:47 pm

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

    # December 3, 2017 at 2:16 pm

    There a typo, for one. It says rbba

    # December 3, 2017 at 2:50 pm

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

    # December 3, 2017 at 2:56 pm


    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!

    # December 3, 2017 at 4:08 pm

    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.

    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
    # December 3, 2017 at 4:34 pm


    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.

    # December 3, 2017 at 4:40 pm

    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)

You must be logged in to reply to this topic.