Блог

Главная - Вопросы по программированию - Фоновое изображение не будет закрываться при применении исправленного, но не будет закрываться по вертикали, когда оно не применяется

Фоновое изображение не будет закрываться при применении исправленного, но не будет закрываться по вертикали, когда оно не применяется

#html #css

#HTML #css

Вопрос:

Я пытаюсь установить это изображение в качестве фона страницы, и по какой-то причине это просто не сработает. Цель состоит в том, чтобы фоновое изображение закрывало страницу, без обрезки по вертикали или горизонтали.

Примечание: Файл CSS подключен к документу.

 HTML:
<body>
  <main>
    <h2 id="cityName">

    </h2>
    <div id="weatherIcon">
      <img id="weatherIconImg"/>
    </div>
  </main>
</body>

CSS:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal/assessment-web-app-essentials/background.jpg?alt=mediaamp;token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-repeat: no-repeat;
-webkit-background-size: cover fixed;
-moz-background-size: cover fixed;
-o-background-size: cover fixed;
background-size: cover fixed;
}

Ответ №1:

Надеюсь, это сработает для вас: 

 body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal/assessment-web-app-essentials/background.jpg?alt=mediaamp;token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
background-attachment: fixed;
}  
 <main>
    <h2 id="cityName">

    </h2>
    <div id="weatherIcon">
      <img id="weatherIconImg"/>
    </div>
  </main>

Вам следует попробовать, background-size: Cover; может быть, изображение будет вырезано справа или снизу, но при этом background-size: 100% 100%; изображение может растянуться. Это полностью зависит от размера изображения.

Ответ №2:

пожалуйста, не используйте этот css-атрибут «background-repeat: no-repeat;», если вы хотите изображение на весь экран.

На самом деле вы можете решить эту проблему двумя способами. 1. используйте полное изображение и повторите изображение, если размер экрана большой 2. растяните изображение на всю ширину.

пожалуйста, посмотрите на приведенный ниже код:

 body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal/assessment-web-app-essentials/background.jpg?alt=mediaamp;token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}  
  <h2 id="cityName"></h2>
 <div id="weatherIcon">
   <img id="weatherIconImg"/>
 </div>

ниже приведен другой метод.

 body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal/assessment-web-app-essentials/background.jpg?alt=mediaamp;token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
}  
  <h2 id="cityName"></h2>
 <div id="weatherIcon">
   <img id="weatherIconImg"/>
 </div>