To make it clearer, the link to the question before ...

I can’t add 1 more background on top of another

 <div class="welcome" id="welcome" > 

 .welcome, .welcome__progress { background-image: url('https://picsum.photos/458/354?gravity=east'); background-repeat: no-repeat; background-size: 100%; background-position: center; background-attachment: fixed; } .bg2 { width: 100%; height: 100%; background-image: url('https://www.gstatic.com/webp/gallery3/1.sm.png'); opacity: 0.5; } .welcome { display: flex; justify-content: center; background-color: #0E1125; } .welcome__inner { padding-top: 250px; box-sizing: border-box; height: 815px; max-width: 1248px; width: 100%; display: flex; padding-left: 20px; padding-right: 20px; justify-content: space-between; } .welcome__left { display: flex; flex-direction: column; } .welcome__left>h1 { font-family: Roboto; font-weight: bold; font-size: 60px; font-weight: 700; color: #FFF; } .welcome__left>p { margin-top: 20px; font-weight: 500; line-height: 42px; font-size: 30px; color: #C1CBE0; } .welcome__left>.btn { margin-top: 40px; align-self: flex-start; color: #fff; } .welcome__right { display: flex; flex-direction: column; padding-right: 20px; } .welcome__countdown { align-self: center; display: flex; } .welcome__countdown-item { display: flex; flex-direction: column; align-items: center; } .welcome__countdown>.welcome__countdown-item:not(:last-child) { margin-right: 20px; } .welcome__countdown-item-value { font-weight: 300; font-size: 40px; color: #3579FF; } .welcome__countdown-item-title { font-weight: 300; font-size: 16px; color: #fff; } .welcome__info { margin-top: 60px; align-self: center; display: flex; flex-direction: column; } .welcome__info-item { display: flex; flex-direction: column; align-items: center; } .welcome__info>.welcome__info-item:not(:nth-child(even)) { margin-bottom: 40px; } .welcome__info-item-title { font-size: 30px; font-weight: 300; color: #fff; } .welcome__info-item-block { margin-top: 10px; font-size: 30px; font-weight: 300; padding: 20px; /* border: 1px solid #fff; */ /* box-shadow: 0 0 10px rgba(48, 43, 99, 0.5); */ width: 240px; display: flex; justify-content: center; color: #fff; } .welcome__progress { padding-top: 60px; padding-bottom: 100px; display: flex; flex-direction: column; background-color: #0E1125; overflow: hidden; box-sizing: border-box; } /* PROGRESS START */ .progress { display: flex; flex-direction: column; max-width: 1208px; width: 100%; align-self: center; padding-right: 20px; box-sizing: border-box; } .progress__bar { display: flex; max-width: 1239px; border: 1px solid #222; height: 10px; box-sizing: border-box; box-shadow: 0 0 6px rgba(48, 43, 99, 0.3); } .progress__bar-indicator { background: linear-gradient(to right, #fff 40%, #3579FF 50%); } .progress__caps { display: flex; justify-content: space-between; } .progress__cap { display: flex; flex-direction: column; position: relative; align-items: center; color: #fff; } .progress__cap-value { position: absolute; transform: translateY(-40px); font-weight: 300; font-size: 30px; display: flex; user-select: none; } .progress__cap-value>span { margin-left: 5px; display: block; } .progress__cap-plank { height: 20px; width: 2px; background-color: #222; } .progress__cap-title { display: flex; position: absolute; transform: translateY(40px); font-size: 18px; text-align: center; user-select: none; } .progress__cap-title>span { margin-left: 5px; display: block; } .progress__cap-title--green { color: #3579FF; } @media (max-width: 1599px) { .progress { max-width: 900px; } } 
 <div class="welcome" id="welcome"> <div class="bg2"></div> <div class="welcome__inner"> <div class="welcome__left"> <h1>text</h1> <p style="font-size:20px">text</p> <a href="#" class="btn" style="position:absolute; margin-left:980px;margin-top:410px">Whitepapper</a> </div> <div class="welcome__right"> <div class="welcome__countdown"> <div class="welcome__countdown-item"> <div class="welcome__countdown-item-value" id="endDays">00</div> <div class="welcome__countdown-item-title">Days</div> </div> <div class="welcome__countdown-item"> <div class="welcome__countdown-item-value" id="endHours">00</div> <div class="welcome__countdown-item-title">Hours</div> </div> <div class="welcome__countdown-item"> <div class="welcome__countdown-item-value" id="endMinutes">00</div> <div class="welcome__countdown-item-title">Minutes</div> </div> <div class="welcome__countdown-item"> <div class="welcome__countdown-item-value" id="endSeconds">00</div> <div class="welcome__countdown-item-title">Seconds</div> </div> </div> <div class="welcome__info"> <div class="welcome__info-item"> <div class="welcome__info-item-title">text</div> <div class="welcome__info-item-block">text</div> </div> <div class="welcome__info-item"> <div class="welcome__info-item-title">text</div> <div class="welcome__info-item-block">text</div> </div> </div> </div> </div> </div> <div class="welcome__progress"> <div class="progress"> <div class="progress__caps"> <div class="progress__cap"> <div class="progress__cap-value">0</div> <div class="progress__cap-plank"></div> <div class="progress__cap-title"></div> </div> <div class="progress__cap"> <div class="progress__cap-value">2 <span>000</span></div> <div class="progress__cap-plank"></div> <div class="progress__cap-title progress__cap-title--green">Soft<span>Cap</span></div> </div> <div class="progress__cap"> <div class="progress__cap-value">4 <span>000</span></div> <div class="progress__cap-plank"></div> <div class="progress__cap-title"></div> </div> <div class="progress__cap"> <div class="progress__cap-value">6 <span>000</span></div> <div class="progress__cap-plank"></div> <div class="progress__cap-title"></div> </div> <div class="progress__cap"> <div class="progress__cap-value">8 <span>000</span> </div> <div class="progress__cap-plank"></div> <div class="progress__cap-title"></div> </div> <div class="progress__cap"> <div class="progress__cap-value">10000 <span>text</span> </div> <div class="progress__cap-plank"></div> <div class="progress__cap-title">Hard<span>text</span></div> </div> </div> <div class="progress__bar"> <div class="progress__bar-indicator" style="width: 55.8%"></div> </div> </div> </div>

  • You have the same background on two blocks .welcome, .welcome__progress delete, .welcome__progress from css if I understand you correctly - l2banners
  • Can you clarify what this means Can not add another 1 background on top of another on the block ? - Air
  • Part of it is especially interesting on top of the block — Air
  • @Air is a continuation of the question ru.stackoverflow.com/questions/919756 - Igor
  • 2
    @Ayurpwnz .bg2 zero height - I do not understand why. Therefore, it is not visible. - Igor

1 answer 1

As I understand from the comments, the block is not displayed due to the fact that it has zero height. Look in your HTML .bg2 is a child element .welcome, in the styles you give it a height in percent, this means that it takes the height of the parent element and counts its height from it, so in your code from .welcome the height is not set, it is not from what to count. Mark the height for .welcome and it will work, but not as a percentage :).