Определение минимальной ширины фонового изображения

Я пытаюсь сделать фоновое изображение на своей веб-странице, определив размер до 80%. Это работает. Я хочу сделать свое фоновое изображение «отзывчивым», поэтому я хочу, чтобы его размер изменялся при использовании меньших окон. Он изменяет размер, но, конечно, он слишком мал, чтобы его было видно идеально. Есть ли способ определить минимальную ширину изображения? Спасибо!

Вот мой CSS:

.pageBio{height: 700px; background-image: url(https://****.png); background-repeat: no-repeat; background-position: center; background-color: #2a67b2; background-size:80%; text-align: center; font-size: 24px; line-height: 30px; color: black;

}

Спасибо!


html css background-image width minimum
person Sep Keuchenius    schedule 27.03.2015    source источник
comment
Есть один атрибут с именем min-width   -  person AkiEru    schedule 27.03.2015
comment
Посмотрите, stackoverflow.com/questions/16679221/ может помочь (медиа-запросы).   -  person maryisdead    schedule 27.03.2015

Ответы (2)


arrow_upward
2
arrow_downward

Как вы уже сказали, вы делаете изображение отзывчивым. поэтому вы можете определить размер изображения с помощью медиа-запроса, упомянутого ниже.

@media only screen and (max-width: 640px){.pageBio{background-size:cover;}}

or

    @media only screen and (max-width: 640px){.pageBio{background-size:auto 100%; }}
person Akash Negi    schedule 27.03.2015

arrow_upward
0
arrow_downward

друг, попробуйте этот код: background-size:80%; замените приведенный ниже код и проверьте его

background-size:150px 150px;
person Uraj    schedule 27.03.2015