как сохранить отзывчивость фонового изображения без начальной загрузки? - PullRequest
Новая
       6

как сохранить отзывчивость фонового изображения без начальной загрузки?

0 голосов
/ 20 июня 2019 

#overlay {
 position: relative;
  height: 630px;
 background-position: center top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
 background-image:url("images/g.jpg");
   max-width: 100%;
 background-size: 100% 100%;
 
}
#overlay svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}


#inner-banner-image {
  padding-top: 100px;
  width: 90%;
   padding-left:750px;

  margin: auto;
  
}

#banner-content {
  padding-top: 6%;
  padding-bottom: 6%;
  overflow: hidden;
 background-color:rgba(255,0,0,0.3);
  margin-bottom: 12%;
  max-width: 660px;
  margin-top: 15%;
    height:400px;
}
<div id="content">
<div id="overlay">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none">
    <circle fill="white" cx="0" cy="100" r="100" />
    <circle fill="white" cx="200" cy="100" r="100" />
  </svg>
<div id="inner-banner-image">
                <center>
                <div id="banner-content">
               <h3> Let's Explore </h3>
                 <h1>Welcome to our GiftShop Store</h1>
                    
                    <a class="btn btn-1"
                     href="#innerwarp">Shop Now </a>
                    </div>
                </div>
                </center>
            </div></div>

enter image description hereenter image description here Я хочу создать наклонный элемент div с адаптивным фоновым изображением. Я перепробовал все возможные решения, но у меня ничего не вышло. Я нахожу только одно решение, но это дает мне сжатое изображение. Как решить это? Пожалуйста, кто-нибудь, помогите. Заранее спасибо

1 Ответ

0 голосов
/ 20 июня 2019

Попробуйте что-то вроде этого 

#overlay {
  position: relative;
  height: 630px;
  background-position: center top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-image:url("images/g.jpg");
  max-width: 100%;
  background-size: cover;
}

Вы также можете заменить background-size:cover; на background-size:fill;

...