Адаптивное фоновое изображение на CSS?

Question

dimatim1516 @dimatim1516

CSS

Адаптивное фоновое изображение на CSS?

Есть картинка нужно сделать фоном чтоб подстраивалась под изменение разрешения делал всё по гайдам (они имеют некоторые отличия) и ничего не работает делал как тут https://webformyself.com/adaptivnoe-celoe-fonovoe-... webteoretik.ru/materials/14 Как правильно делать это, весь день ищу решение.

Вопрос задан более трёх лет назад
106 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 2

13 комментариев

dimatim1516 @dimatim1516 Автор вопроса

не работает

Написано более трёх лет назад
dimatim1516 @dimatim1516 Автор вопроса

Написано более трёх лет назад
BEKa T @Bread09

dimatim1516, а почему ты ширину body сделал фиксированным

Написано более трёх лет назад
BEKa T @Bread09

dimatim1516, и почему (), когда надо {}

Написано более трёх лет назад
dimatim1516 @dimatim1516 Автор вопроса

Bred Thomson, исправил скобки и убрал 800px ничего не работает

Написано более трёх лет назад
dimatim1516 @dimatim1516 Автор вопроса

где можно норм инфу найти по этим медиа запросам и адаптивным изображениям за сегодня посмотрел 3 видео и 4 сайта везде в методах были отличия и у меня не работал ничего

Написано более трёх лет назад
BEKa T @Bread09

dimatim1516, выложи исходники на Codepen или ГитХаб

Написано более трёх лет назад
BEKa T @Bread09
dimatim1516, я почему-то не вижу что бы добавил изодражение

@media only screen and (max-width: 767px) { body { background-image: url(images.jpg); } }
Написано более трёх лет назад
BEKa T @Bread09

dimatim1516, попробуй добавить изображение блоку через background, а не через img тег

Написано более трёх лет назад
BEKa T @Bread09

dimatim1516, а я говорю изображение добавь к body, а не к .image_background

Написано более трёх лет назад
dimatim1516 @dimatim1516 Автор вопроса

Bred Thomson, так?

Написано более трёх лет назад
BEKa T @Bread09

dimatim1516, background: cover;

Написано более трёх лет назад

BEKa T @Bread09

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	...Здесь располагается ваш контент...
</body>
</html>

style.css

body {
  /* Путь до изображения */
  background: url(img.jpg);
  
    /* Фоновое изображение всегда отцентрировано по вертикали и горизонтали */
  background-position: center center;
  
  /* Фоновое изображение не повторяется */
  background-repeat: no-repeat;
  
  /* Фоновое изображение зафиксировано в окне просмотра, поэтому оно не смещается, когда высота контента больше высоты изображения */
  background-attachment: fixed;
  
  /* Вот что позволяет фоновому изображению подстраиваться под размер контейнера */
  background-size: cover;
  
  /* Устанавливает фоновый цвет, который будет отображаться, пока загружается фоновое изображение */
  background-color: #464646;
  color: #fff;
}

Написано более трёх лет назад