Как установить ширину 100% для изображения параллакса? - PullRequest
Новая
       15

Как установить ширину 100% для изображения параллакса?

0 голосов
/ 16 апреля 2019

У меня есть класс параллакса, который также содержит изображение.Я попытался сделать изображение отзывчивым, установив ширину изображения на 100%, но оно просто не работает. 

.parallax1 {
  /* The image used */
  background-image: url('Images/FloralPurple.png');
  /* Full height and width */
  height: 100%; 
  width:100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

, а следующий код HTML: - 

<div style="height:230px;background-color:#001332;font-size:20px; color: #ffffff; padding: 18px">
Some text which defines the image</div>

Iпопытался добавить тег изображения внутри моего div, но все равно ничего не изменилось.

Спасибо

1 Ответ

1 голос
/ 16 апреля 2019

Размер вашего фонового изображения определяется свойством background-size css.При установке на cover изображение будет масштабироваться для заполнения div.Вы можете установить размер фона на следующие значения:

  • cover Как описано, div распространяется.Изображение масштабируется и обрезается.
  • contain Изображение всегда полностью полностью видно и масштабируется для того, чтобы быть полностью видимым.
  • 100px 50px Фиксированный размер.Изображение растягивается.
  • 50% 100% Процент.Изображение растягивается.

Пример: 

background-size: 100%;

Изображение всегда будет заполнять div.Но потянитесь, чтобы сделать это.

...