sunilrout Ответов: 1

Как исправить фоновое изображение, отображаемое на компьютере и мобильных телефонах?

Привет,

У меня есть asp.net веб-страница с фоновым изображением. В моем ноутбуке изображение появляется правильно, где в качестве одного и того же фонового изображения веб-страницы появляется половина, а другая часть пуста на мобильном телефоне.

Какой css-код я должен использовать для достижения адаптивного фонового изображения.

размер изображения - 1920 * 1080

Что я уже пробовал:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
  background-image:url('Stock/exam5.jpg');  
  background-repeat:no-repeat;  
  background-position:center center;
  background-size:cover;
  min-height:100%;
}

1 Ответов

Рейтинг:
4

Sandeep Mewara

Вы можете использовать media queries добиться этого.

Пример:

body {
	background: url(../images/desktop.jpg) no-repeat center center fixed;
}

@media only screen and (min-width : 320px) and (max-width : 480px) {
	background: url(../images/mobile.jpg) no-repeat center center fixed;
}


CSS Media Queries: это таблицы стилей на основе мультимедиа, которые позволяют настраивать представление контента для определенного диапазона устройств вывода без необходимости изменять сам контент.