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,839
    Likes Received:
    4,542
    Best Answers:
    123
    Trophy Points:
    665
    #2
    sarahk, Sep 6, 2020 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    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