Изменение размера фона со страницы - PullRequest
Новая
       3

Изменение размера фона со страницы

1 голос
/ 19 января 2020

(Пожалуйста, будьте добры, я довольно новичок во всем этом). Я попытался использовать cover, absolute, auto и все остальное, чтобы попытаться заставить фон изменить размер вместе со страницей. Всякий раз, когда я делаю размер страницы меньше или больше, у меня остается белое поле внизу: https://imgur.com/a/KauGhfD

Единственный способ получить белый цвет до go если я снова сделаю страницу в полном размере. Вот мой CSS. 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-positon: absolute;
  overflow: hidden;
  width: 100%
  top: 0;
  left: 0;
}
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 19 января 2020

вы можете использовать этот код для обложки для фона страницы, но вы должны сохранить соотношение сторон для изображения, в вашем коде две ошибки: 1- background-position:absolute неверно 2- width:100% это неверно, потому что тело имеет эти свойства Вы должны изменить свой код следующим образом 

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
 height:100%;
}
body {
  background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg"); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
 }
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>
1 голос
/ 19 января 2020

попробуйте устранить эту проблему:

  • добавить ; после ширина: 100%
  • значение этого свойства абсолютное не правильно background-positon: absolute;

проверьте эту ссылку, чтобы узнать правильное значение

https://www.w3schools.com/cssref/pr_background-position.asp

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

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

...