минимальный размер background

@darksector · Регистрация: 05.05.2013

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

Добрый день. Есть такая проблема: я делю фон у body на два цвета

CSS
1
background: linear-gradient(to right, #004C7F 0%, #004C7F 50%, #000000 50%, #007ACC 50%, #007ACC 100%);

но все div, которые расположены по центру на body имеют ширину 1050px. При изменении общей ширины страницы, скажем до 800px (просто смотрю, как будет отображаться на устройствах с низким разрешением), то div уже остаются на месте, а фон уменьшается дальше. Т.е. фон на 2 цвета просто служит визуальным разделителем.

Собственно вопрос: как у body с таким background сделать так, чтобы background не изменял фон ниже 1050px?

@Fedor92 · 30.04.2016, 14:39

darksector, может задать для блока min-width:1050px? Тогда и фон уменьшаться не будет...

@darksector · 30.04.2016, 15:52 **[ТС]**

Сообщение от Fedor92

может задать для блока min-width:1050px

для body? пытался уже, все равно уменьшает. При этом проверил свойство у body через инструменты разработчика google chrome - свойство min-width:1050px есть и включено. Т.е. ему ничего не мешает, но уменьшать все равно можно ниже 1050px...

@Fedor92 · 30.04.2016, 16:00

darksector, уменьшение или увеличение фона зависит от блока в котором он находится... То есть если у Вас есть блок с шириной 400px и высотой 400px, то как не уменьшай или увеличивай страницу с фоном ничего не будет... Я как раз в предыдущем посте и указал на то, что если блок, к которому привязан фон, имеет резиновые размеры, то ему необходимо задать минимальную ширину - меньше которой он уже не будет... Если не работает скорее всего стили перекрываются, если что могу сделать пример...

@darksector · 30.04.2016, 16:08 **[ТС]**

Сообщение от Fedor92

Если не работает скорее всего стили перекрываются, если что могу сделать пример...

Я это все прекрасно понимаю, именно поэтому я написал

Сообщение от darksector

Т.е. ему ничего не мешает, но уменьшать все равно можно ниже 1050px...

указав так, что ничего не перекрывается

Сообщение от Fedor92

То есть если у Вас есть блок с шириной 400px и высотой 400px, то как не уменьшай или увеличивай страницу с фоном ничего не будет

Да, но мне нужно чтобы она увеличивалась, но не уменьшалась ниже 1050px.

Ну... вот пример:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body  {
    background: linear-gradient(to right, #004C7F 0%, #004C7F 50%, #000000 50%, #007ACC 50%, #007ACC 100%);
 
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    text-align: left;
    font-size: 16px;
    line-height: 17px;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;/* kerning, primarily */
    -moz-font-feature-settings: 'liga';
    -ms-font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
 
    min-width: 1050px;
}

Даже на cssdeck.com такой подход не работает.

@Fedor92 · 30.04.2016, 16:13

darksector, а что если сделать обёртку? Если я правильно понимаю суть проблемы конечно...

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
<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
        <title></title>
        <meta name="description" content="">
        <meta name='keywords' content=""/>
    </head>
    <style>
    html, body{width:100%; height:100%; margin:0}
    div {
    width:100%;
    height:100%;
    background: linear-gradient(to right, #004C7F 0%, #004C7F 50%, #000000 50%, #007ACC 50%, #007ACC 100%);
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    text-align: left;
    font-size: 16px;
    line-height: 17px;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;/* kerning, primarily */
    -moz-font-feature-settings: 'liga';
    -ms-font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    min-width: 1050px;
}   
    </style>
    <body>
<div></div>
</body>
</html>

@darksector · 30.04.2016, 16:20 **[ТС]**

Сообщение от Fedor92

а что если сделать обёртку?

в принципе, я тоже так думал, и решение вроде бы подходящее, но тут проблема, нужно, чтобы по верх этого блока рисовали, т.е. возможно поиграться с z-index, но я пока не понял этот параметр, особенно если задаются значения от минуса - т.е. что впереди, что сзади...

Добавлено через 2 минуты
что по умолчанию...

@Fedor92 · 30.04.2016, 16:23

в принципе, я тоже так думал, и решение вроде бы подходящее, но тут проблема, нужно, чтобы по верх этого блока рисовали, т.е. возможно поиграться с z-index, но я пока не понял этот параметр, особенно если задаются значения от минуса - т.е. что впереди, что сзади...

Допустим, если задать блоку z-index:-1, то если задать остальным блокам на странице положительный z-index, включая 0 - он будет ниже всех... Главное в блоке с отрицательным z-index не располагать ссылки - они работать не будут...

И если будете использовать z-index, не забывайте дописывать позиционирование(position), иначе z-index работать не будет...

@darksector · 30.04.2016, 16:36 **[ТС]**

Сделал так:

добавил пустой div для фона

HTML5
1
<div id="background-main"></div>

стили прикрутил так

CSS
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
body  {
    height: 100%;
 
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    text-align: left;
    font-size: 16px;
    line-height: 17px;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;/* kerning, primarily */
    -moz-font-feature-settings: 'liga';
    -ms-font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}
 
#background-main {
    width: 100%;
    height: inherit;
    background: linear-gradient(to right, #004C7F 0%, #004C7F 50%, #000000 50%, #007ACC 50%, #007ACC 100%);
    min-width: 1050px;
    z-index: -1;
}
 
div {
    z-index: 1;
}

В итоге: высота в #background-main от body не наследуется, можно только назначит, и, несмотря на то, что у тегов div z-index разный ( -1 у background-main и 1 у остальных ), они все равно рисуются после background-main...

@Fedor92 · 30.04.2016, 16:49

Сообщение от darksector

В итоге: высота в #background-main от body не наследуется

Наследуется!

Сообщение от darksector

несмотря на то, что у тегов div z-index разный ( -1 у background-main и 1 у остальных )

Это я для кого писал:

Сообщение от Fedor92

И если будете использовать z-index, не забывайте дописывать позиционирование(position), иначе z-index работать не будет...

Примерчик

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
<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
        <title></title>
        <meta name="description" content="">
        <meta name='keywords' content=""/>
    </head>
    <style>
    *{box-sizing:border-box}
    html, body{width:100%; height:100%; margin:0}
    body  {
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        text-align: left;
        font-size: 16px;
        line-height: 17px;
        word-wrap: break-word;
        text-rendering: optimizeLegibility;/* kerning, primarily */
        -moz-font-feature-settings: 'liga';
        -ms-font-feature-settings: 'liga';
        -webkit-font-feature-settings: 'liga';
        font-feature-settings: 'liga';
    }
 
    #background-main {
        position:absolute;
        width: 100%;
        height: inherit;
        border:4px solid red;
        background: linear-gradient(to right, #004C7F 0%, #004C7F 50%, #000000 50%, #007ACC 50%, #007ACC 100%);
        min-width: 1050px;
        z-index: -1;
    }
 
    #text {
        position:relative;
        display:table;
        color:#fff;
        width:100%;
        height:100%;
        font:100px/1.25 Tahoma;
        z-index: 1;
        text-align:center;
    }
    </style>
    <body>
<div id="background-main"></div>
<div id="text">Lorem ipsum</div>
</body>
</html>

@darksector · 30.04.2016, 16:53 **[ТС]**

ОНО РАБОТАЕЕЕЕЕТ! РАБОТААЕЕЕЕЕЕЕЕТ!!!

Спасибо.

@Fedor92 · 30.04.2016, 17:00

darksector, для блокa text можно вообще z-index не указывать, как и position...

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	30.04.2016, 14:39
	darksector, может задать для блока min-width:1050px? Тогда и фон уменьшаться не будет... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	30.04.2016, 16:00
	darksector, уменьшение или увеличение фона зависит от блока в котором он находится... То есть если у Вас есть блок с шириной 400px и высотой 400px, то как не уменьшай или увеличивай страницу с фоном ничего не будет... Я как раз в предыдущем посте и указал на то, что если блок, к которому привязан фон, имеет резиновые размеры, то ему необходимо задать минимальную ширину - меньше которой он уже не будет... Если не работает скорее всего стили перекрываются, если что могу сделать пример... 0

@darksector 118 / 5 / 4 Регистрация: 05.05.2013 Сообщений: 336
	30.04.2016, 16:53 [ТС]
	ОНО РАБОТАЕЕЕЕЕТ! РАБОТААЕЕЕЕЕЕЕЕТ!!! Спасибо. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	30.04.2016, 17:00
	darksector, для блокa text можно вообще z-index не указывать, как и position... 0

минимальный размер background

Решение