Как правильно установить изображение в качестве фона?

#html #css

#HTML #css

Вопрос:

Я пытаюсь установить изображение в качестве фона, но приближается масштабируемая версия изображения.

Мой код

 
<!DOCTYPE html>
<html>
<head>
<style>

body, html {
  height: 100%;
}
.bg {
  /* The image used */
  background-image: url("../../media/image1.jpeg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body class="bg">
</body>
</html>

Как я могу это исправить?

1. Вы уверены, что изображение достаточно большое? Когда оно увеличено, это обычно означает, что оно было недостаточно большим, чтобы поместиться в контейнер, поэтому оно было увеличено.

2. вы могли бы попробовать установить background-size: cover; в background-size: contain; и посмотреть, как это выглядит, если не пытаться закрыть тело, но сохранить его собственный размер

3. Ваш код работает просто отлично.? Я только что протестировал это. проверьте разрешение вашего изображения.

4. да, contain работает, большое спасибо

Ответ №1:

Вы можете использовать свойство background-size, вот следующее руководство:

размер фона: авто

Значение по умолчанию. Фоновое изображение отображается в исходном размере:

 div{
  width:100px;
  height:100px;
  border:5px solid blue;
  background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
  background-size:auto;
}

 <div></div>

background-size: длина Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, второму присваивается значение «auto». Прочитайте о единицах длины

 div{
  width:100px;
  height:100px;
  border:5px solid blue;
  background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
  background-size:10px;
}

 <div></div>

размер фона: в процентах

Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, второму присваивается значение «auto»

 div{
  width:100px;
  height:100px;
  border:5px solid blue;
  background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
  background-size: 10%;
}

 <div></div>

размер фона: обложка > хороший ответ на этот вопрос<

Измените размер фонового изображения, чтобы оно покрывало весь контейнер, даже если для этого придется растянуть изображение или немного обрезать один из краев

 div{
  width:100px;
  height:100px;
  border:5px solid blue;
  background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
  background-size:cover;
}

 <div></div>

размер фона: содержит > лучший ответ на этот вопрос<

Измените размер фонового изображения, чтобы убедиться, что изображение полностью видно

 div{
  width:100px;
  height:100px;
  border:5px solid blue;
  background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
  background-size:contain;
}

 <div></div>

размер фона: начальный

Устанавливает это свойство в значение по умолчанию.

размер фона: наследовать

Наследует это свойство от своего родительского элемента.

Источник на фоне-размер

Предложение по последующему чтению

1. Хороший ответ. Я думаю, что единственное, чего не хватает, это background-repeat установить в no-repeat . В примере с использованием background-size: contain кончик уха кошки показан внизу.