1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Adding opacity to this image.

Discussion in 'HTML & Website Design' started by Canadacatmans, Sep 6, 2020.

  1. #1
    How can I add opacity 0.8 to this code
    background: #1f84b6 url(https://www.capebretoncares.com/img/background.jpg) no-repeat center center;

    I can not add it to the div css that image is in as there are other images in it and i do not want it to affect them or the content in that div.
    SEMrush
    Thanks
     
    Canadacatmans, Sep 6, 2020 IP
    SEMrush
  2. sarahk

    sarahk iTamer Staff

    Messages:
    26,758
    Likes Received:
    4,068
    Best Answers:
    115
    Trophy Points:
    665
    #2
    sarahk, Sep 6, 2020 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,463
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #3
    add the image as generated content, then set its siblings in the parent element to position:relative so they can depth-sort over it.

    let's say div#test is the parent:

    #test { position:relative; }
    #test > * { position:relative; } /* or whatever other child elements are there */
    #test:before {
      content:"";
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background(images/yourBackgroundimage.jpg);
      opacity 0.8;
    }
    Code (markup):
     
    deathshadow, Sep 7, 2020 IP