Forums

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

Home › Forums › CSS › [Solved] rbga tranparency or something else?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 30, 2015 at 2:59 pm #194732
    Alien
    Participant

    Hi,

    All evening i’m stuck at this transparency thing. I didn’t made a codepen because it workes there???

    pls check http://users.telenet.be/waege/index.html

    The first 3 boxes work fine, but then when you scrolldown it turns darkgrey. Even though i use the same rbga. If i turn the other transparency to 0 as well, the grey turns white. So where those this come from?

    I’m at a total loss here, probably something easy.

    Thanks,

    January 30, 2015 at 6:11 pm #194737
    Shikkediel
    Participant

    The element .flexcontainer has some CSS that is adding a semi transparent black background to everything. With it’s opacity set to 0.5, this is causing the additional ‘grey’ to show up.

    Edit – the grey will always start showing from the bottom of the screen on because the background image has it’s height set to 100% (which is the screen height). So it’ll vary on different devices.

    January 31, 2015 at 4:17 am #194745
    Alien
    Participant

    thx, but like i pointed out. If i turn it to 0 it turns white. (i turned to to 0.5 so you could see the other boxes as well)

    But why and where do this whitenow) comes from (i changed it to 0

    January 31, 2015 at 4:24 am #194750
    Shikkediel
    Participant

    That’s the default ‘transparent’ background color of <body>…

    January 31, 2015 at 4:28 am #194752
    Alien
    Participant

    but i’ve overwritten is width a “css-tricks” tips for full page background images with class .bg ?

    January 31, 2015 at 4:34 am #194753
    Shikkediel
    Participant

    Got a link to that? Something must not be set up correctly. I could guess but it would be better to know what the original idea was.

    Edit – found it already. Copy it exactly and it should work :

    html { 
background: url(img/retina.jpg) no-repeat center center fixed;
background-size: cover;
}

    https://css-tricks.com/perfect-full-page-background-image/

    January 31, 2015 at 4:50 am #194754
    Alien
    Participant

    yes that is the link, but i had put it all in a div like it says in de updates (div 100% width and height%, for IE)

    Putting it only on the html didn’t work either, but combining html and body css then is worked. Weird.

    It works now.

    Just for the recored, why would it have worked is a had transparency on body to 0 and had a div with 100% width and height. Logically it would layer over the body, thus showing the pictures as a background?

    thanks, solved

    January 31, 2015 at 5:10 am #194755
    Shikkediel
    Participant

    I reckon you’re checking on IE (FF is my own default, the solution worked there)… in case of using a div, it should be a separate element without any content or it’s overflow will diminish the effect. Or the div itself should have fixed position but then any overflow will be hidden (so it should be empty in either case). Good thing you got it to work though.

    Edit – aformentioned code seems to work on IE on my setup as well.

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