+ Reply to Thread
Results 1 to 9 of 9

Thread: Apply a layer background for listing img

  1. #1

    Apply a layer background for listing img

    Dear Flynax Family,

    Some times user use a white background image and it look blended in with the main white background, not so clear like in screenshot below:

    z.png

    Is there any way I can add a background opacity 0.5 on top of that.
    I tried :

    section#listings div.picture > img:after {
    position: absolute;
    top:0;
    left:0;
    content: " ";
    background: rgba(0, 0, 0, 0.5);
    }
    Any idea how to fix this?

    Thanks

  2. #2
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    1,580
    Hello,

    You can add a border of gray color like:

    Code:
    Only registered members can view the code.

  3. #3
    Quote Originally Posted by Rudi View Post
    Hello,

    You can add a border of gray color like:

    Code:
    Only registered members can view the code.
    Hi Rudi,

    Thanks for your recommendation. I did try the border but it does not look great. I think the background layer on top looks better, saw it on other site. Is there any way to apply that with css code.

    Best

  4. #4
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    1,580
    I need some example

    cause it's not clear what background you mean

  5. #5
    Quote Originally Posted by Rudi View Post
    I need some example

    cause it's not clear what background you mean
    Hi Rudi,

    I want a black background with opacity 0.2 on top of the listing img (path is section#listings div.picture > img). I had tried the following code but it didn't work.

    section#listings div.picture > img:after {
    position: absolute;
    top:0;
    left:0;
    content: " ";
    background: rgba(0, 0, 0, 0.2);
    }
    For example this one with ::after


  6. #6
    Hi, any help would be really appreciate. Or it's impossible without difficult edit?

  7. #7
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    1,580
    Hello Wei,

    Use this:

    Code:
    Only registered members can view the code.

  8. #8
    Quote Originally Posted by Rudi View Post
    Hello Wei,

    Use this:

    Code:
    Only registered members can view the code.
    Oh man that works great. Thanks Rudi

  9. #9
    Master
    Join Date
    Apr 2017
    Location
    Tehran/Iran
    Posts
    432
    Quote Originally Posted by Wei Hong View Post
    Oh man that works great. Thanks Rudi
    It blurs quality of foreground picture. Perhaps 0.1 is better than 0.5

+ Reply to Thread