Ищу правильное решение с адаптивным фоновым изображением

@Romad2008 · Регистрация: 28.04.2015

Студворк — интернет-сервис помощи студентам

К примеру есть изображение в виде фоновой картинки кот. будет находиться в шапке сайта. Изображение будет отцетрировано, а по краям будет фоновый цвет. При уменьшении размера браузера, изображение должно соответственно адаптироваться. В шапке также будет пару блоков с текстом.

С изображением получился затык. Кстати пробовал добавлять padding-top: %; - работает, только тогда текст блока идет ниже фонового изображения.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
    <link rel="stylesheet" type"text/css" href="styles.css" />
    
 
</head>
 
<body>
<div class="main">
 
    <div class="header">
    <h1>Приветствую</h1>
    </div>
</div>
 
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
margin:0;
padding:0;
background-color:#edd383;
background-image: url([url]http://www.pets4homes.co.uk/images/articles/3442/why-is-my-cats-coat-changing-colour-5698ec0804ccb.jpg);[/url]
background-repeat:no-repeat;
background-position:center;
 
}
.main {
max-width:740px;
margin:0 auto;
}
 
.header {
 
}

@Андрюшатина · 21.01.2016, 18:58

CSS
1
2
3
4
body {
background: url('../img/example.png')  #f0bf93 85% 59%  no-repeat ;
background-size: 45%;
}

вот тебе пример как я работаю с картинками в фоне.

зачастую если мне нужно адаптивно фоновую картинку сдвигать в зависимости от разрешения, я создаю отдельный блок куда её вкладываю, но со значением position: absolute.

так же отличный вариант изменения позиции твоей фоновой картинки - это использование @media (медиа запросов), где при нужной ширине ты задаешь другие координаты своей картинки.

Помогло?

@Romad2008 · 16.02.2016, 21:26 **[ТС]**

При таких настройках когда фоновую картинку ложу в div - она вообще пропадает (т.е когда не задаю height в div - ее просто нету)
работает только в body.

Вот набросал пример - что не так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Тест</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        
</head>
<body>
    <div class="main">
        <div class="head">
                <h1> Привет</h1>
    </div>
    </div>
    
</body>
</html>
[CSS]
* {
margin:0;
padding:0;
}
.main {
        
}
.head {
    width:960px;
    margin: 0 auto;
    background-image: url(images/bg.jpg);
    background-color:#0c7f8d;
}
[/CSS]

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .