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

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

0 голосов
/ 18 марта 2019

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

Примечание. Файл 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%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&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;
}

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

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

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

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

body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&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%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
}
 <h2 id="cityName"></h2>
 <div id="weatherIcon">
   <img id="weatherIconImg"/>
 </div>
0 голосов
/ 18 марта 2019

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

body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&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%; изображение может растягиваться.Это полностью зависит от размера изображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...