2

На сайте есть 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>

10
  • 1
    А у меня очень даже меняется. Предоставьте минимальный воспроизводимый пример
    – andreymal
    12 дек 2018 в 13:59
  • @andreymal поправил вопрос.
    – Ayurpwnz
    12 дек 2018 в 14:28
  • 1
    Вы уверены, что это пример является минимальным и больше в нём нет ничего, что не касается проблемы с фоном?
    – andreymal
    12 дек 2018 в 14:30
  • Кроме того, поясните, о каком фоне идёт речь в этом коде. Если о url('../img/wbg.png') — то он отлично работает, если подставить корректную ссылку на картинку
    – andreymal
    12 дек 2018 в 14:31
  • 1
    В показанном вами коде представлено пятьдесят пять блоков. Или сократите пример, выкинув всё лишнее, или точно-преточно уточните, что же именно вы имеете в виду
    – andreymal
    12 дек 2018 в 14:53

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.