Задний фон для блоков

147
12 июня 2019, 17:20

На сайте есть 2 блока div, нужно на эти 2 блока поставить задний фон, но не понимаю как это сделать, попытался обернуть их в еще в один div и поставить для него свойство background-image, но ничего не меняется.

.welcome { 
  display: flex; 
  justify-content: center; 
  background-color: #0E1125; 
  background-image: url('../img/wbg.png'); 
  background-repeat: no-repeat; 
  background-size: 25%; 
  background-position: center; 
   
} 
 
.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="welcome__inner"> 
      <div class="welcome__left"> 
        <h1>EffMining</h1> 
        <p style="font-size:20px">test</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">Raised</div> 
            <div class="welcome__info-item-block">5570 ETH</div> 
          </div> 
          <div class="welcome__info-item"> 
            <div class="welcome__info-item-title">Price</div> 
            <div class="welcome__info-item-block">1 ETH = 1488 XUI</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>ETH</span> </div> 
          <div class="progress__cap-plank"></div> 
          <div class="progress__cap-title">Hard<span>Cap</span></div> 
        </div> 
      </div> 
      <div class="progress__bar"> 
        <div 
          class="progress__bar-indicator" 
          style="width: 55.8%" 
        ></div> 
      </div> 
    </div> 
  </div>

Answer 1

.wrapper{ 
  width: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: yellow; 
} 
 
.b1, .b2 { 
  width: 100px; 
  height: 100px; 
  background-image: url("http://www.mountsinai.on.ca/about_us/news/news-feature/img/demopage/image-3.jpg"); 
  background-size: cover; 
}
<div class="wrapper"> 
  <div class ="b1"> 
    1 
  </div> 
  <div class="b2"> 
    2 
  </div> 
</div>

READ ALSO
Подключение внешних элементов
HTML

Подключение внешних элементов

суть в чем, на пхп можно подключить часть верстки которая находится в отдельном html файле скриптом,

 148
Как вернуть ссылкам функционал после return false?
jQuery

Как вернуть ссылкам функционал после return false?

Такая структура:

 145
Append к классу
jQuery

Append к классу

Не применяетсяappend для классов

 153
Определить нужный класс и заменить его
jQuery

Определить нужный класс и заменить его

В общем есть блок, который имеет два класса, допустим выглядит так:

 103