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.

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

    Thanks
     
    Canadacatmans, Sep 6, 2020 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    sarahk, Sep 6, 2020 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    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