Background-image: как не уменьшать размер изображения, а уводить его за поля браузера

@Russwell · Регистрация: 28.05.2018

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

Всем доброго дня! Только недавно начал вникать в основы html/css, начал писать код для будущего сайта, и столкнулся с проблемой с backgroun-image: при уменьшении окна браузера картинка на заднем фоне страницы так же уменьшается, а оп задумке часть страницы, которая не попадает на экран должна просто уходить за поля браузера... можете подсказать как должен выглядеть такой код? Своё творение прилагаю

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
    <head>
        <title>
            Мой сайт
        </title>
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <meta charset="utf-8">
        <style>
        html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow:auto;
        }
        .mainpage {
            background-color: black;
            background-image: url(/PICTURES&GiFs/bg.jpg);
            background-attachment: fixed;
            width: 100%;
            height: 100%;
            min-width:1000px;
            min-height:650px;
            background-size: contain;
            background-position: center center;
            background-repeat:no-repeat;
            position: fixed;
            opacity:1;
            z-index:1;
        }
        .menu {
            width:300px;
            height:100px;
            position:absolute;
            background-color:green;
            z-index:2;
        }
            </style>
    </head>
    <body>
        <div class="mainpage">
          
        </div>
         <div class="menu">
             
           </div>
        </body>
</html>

@Freeze_Breeze · 28.05.2018, 09:10

Russwell, для изображения задайте значение не в % а в px, то есть у Вас

CSS
1
2
3
4
.mainpage {
   width: 100%;
   height: 100%;
}

А вам надо

CSS
1
2
3
4
.mainpage {
   width: 100px
   height: 100px;
}

И убрать

CSS
1
2
3
min-width:1000px;
min-height:650px;
background-size: contain;

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом