Градиент не растягивается на 100% по высоте и ширине

@Cdelphi78 · Регистрация: 21.02.2014

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

Значить, прописываю градиент тегу body а он не растягивается на всю ширину и высоту как если просто указать цвет.

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <div class="bl-1">
        <h1>Bacground Fon</h1>
   </div>
   
    
</body>
</html>

Кликните здесь для просмотра всего текста

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
27
28
29
30
31
32
33
34
body {
        background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #3FFF05),
    color-stop(1, #000000)
);
background: -o-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -moz-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -webkit-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -ms-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: linear-gradient(to bottom, #3FFF05 0%, #000000 100%);
    
}
    
    
 
 
 
 
 
h1 {
    
    font-size:15em;
    color:red;
    text-align: center;
    
}
.bl-1 {
    width: 500px;
    height: 500px;
    background:  red;
}

Кликните здесь для просмотра всего текста

Градиент не растягивается на 100% по высоте и ширине

@the_false · 13.11.2015, 14:52

По умолчанию, вроде, высота body равна его содержимому, вот он и заливается так.
Вот так должно помочь:

CSS
1
2
3
4
5
6
html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

@Cdelphi78 · 13.11.2015, 15:38 **[ТС]**

Все заработало, пасиб, странно у меня даже reset.css был подключен.

Добавлено через 11 минут
теперь другая проблема при добавлении туда же фонового изображения, оно пропадает, остается градиент, как их использовать градиент и фоновое изображение вместе?

Добавлено через 1 минуту
Теперь другая проблема при добавлении туда же в body фонового изображения оно пропадает, как испjльзовать вместе градиент и картинку?

@Almag13 · 13.11.2015, 17:17

Когда вы используете градиент, то background занят... Ваш код:

CSS
1
2
3
4
5
background: -o-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -moz-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -webkit-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -ms-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: linear-gradient(to bottom, #3FFF05 0%, #000000 100%);

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

CSS
1
2
3
4
5
6
7
8
9
background: url('images.jpg'); // в данном случае градиент переопределит картинку
 
background: -o-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -moz-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -webkit-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -ms-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: linear-gradient(to bottom, #3FFF05 0%, #000000 100%);
 
background: url('images.jpg'); // в данном случае картинка переопределит градиент

@the_false · 13.11.2015, 17:28

Теперь другая проблема при добавлении туда же в body фонового изображения оно пропадает, как испjльзовать вместе градиент и картинку?

Способов может быть несколько, смотря какой больше в кайф.

Можно, просто не заморачиваться, а покрыть все блоком с картинкой, как сказано выше. А точнее даже в body - картинку, а поверх блок градиента. Но может не подойти.

Или - записать вот так:

CSS
1
2
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(63,255,5,0.5)), color-stop(1, rgba(0,0,0,0.5)) ), url([url]https://www.cyberforum.ru/customavatars/avatar457660_1.gif);[/url]
}

CSS позволяет через запятую назначить цвет и картинку одновременно, и даже несколько картинок в одном background, если надо.
Но в вашем случае фишка в том, что если не убавить opacity для цвета, то они перекрываются. В том куске, что указан мною выше у цвета 0.5 прозрачность и потому картинка видна)

@Almag13 · 13.11.2015, 17:42

multiple backgound, сейчас возможно и работает со многими браузерами, раньше это было не совсем кроссбраузерное решение...
Посмотреть тут

@Cdelphi78 · 13.11.2015, 20:37 **[ТС]**

Без определения прозрачности можно сделать, если нет то тогда придется дополнительный блок с z-indekcom городить.

Добавлено через 33 минуты
а как же делают сайты где идет фоновое изображения а дальше обычный цвет при масштабировании

@the_false · 13.11.2015, 21:48

Так, что можно поставить background-image и background-color отдельно. Вы-то говорили о том, чтобы они одновременно показывались, а при масштабировании - это другое. Общий фон и картинку сделать, не есть наложить градиент на картинку да еще и растягивать их пропорционально.

@Cdelphi78 · 13.11.2015, 23:19 **[ТС]**

Я имел ввиду что есть фоновое изображение определенного размера например 2000 на 2000, а за ним то идет не просто цвет по дефолту, а цвет -градиент то есть при масштабировании до минимума 30% во всех браузерах, просто ставить отдельно фоновое изображение и фон сайта мне кажется костылем.

@the_false · 13.11.2015, 23:53

Тогда только так, как было в примере с вашей аватаркой, только еще с позиционированием картинки. Но, как уже писал товарищ выше - поддерживается не так давно и кое-где может не сработать.

CSS
1
2
background: url([url]https://www.cyberforum.ru/customavatars/avatar457660_1.gif[/url]) center top no-repeat, 
-webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(63,255,5,1)), color-stop(1, rgba(0,0,0,1)) );

@Cdelphi78 · 16.11.2015, 01:19 **[ТС]**

Короче возился возился с масштабированием, и взял просто сделал еще одну обертку #fon 2000х2000px туда запихал картинку фона, спозиционировал по центру и все нормально сейчас, а то при масштабировании до минимума все ехало кривось накось)))) да и градиент за ним теперь появился.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	13.11.2015, 15:38 [ТС]
	Все заработало, пасиб, странно у меня даже reset.css был подключен. Добавлено через 11 минут теперь другая проблема при добавлении туда же фонового изображения, оно пропадает, остается градиент, как их использовать градиент и фоновое изображение вместе? Добавлено через 1 минуту Теперь другая проблема при добавлении туда же в body фонового изображения оно пропадает, как испjльзовать вместе градиент и картинку? 0

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	13.11.2015, 17:42
	multiple backgound, сейчас возможно и работает со многими браузерами, раньше это было не совсем кроссбраузерное решение... Посмотреть тут 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	13.11.2015, 20:37 [ТС]
	Без определения прозрачности можно сделать, если нет то тогда придется дополнительный блок с z-indekcom городить. Добавлено через 33 минуты а как же делают сайты где идет фоновое изображения а дальше обычный цвет при масштабировании 0

@the_false 0 / 0 / 1 Регистрация: 13.11.2015 Сообщений: 7
	13.11.2015, 21:48
	Так, что можно поставить background-image и background-color отдельно. Вы-то говорили о том, чтобы они одновременно показывались, а при масштабировании - это другое. Общий фон и картинку сделать, не есть наложить градиент на картинку да еще и растягивать их пропорционально. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	13.11.2015, 23:19 [ТС]
	Я имел ввиду что есть фоновое изображение определенного размера например 2000 на 2000, а за ним то идет не просто цвет по дефолту, а цвет -градиент то есть при масштабировании до минимума 30% во всех браузерах, просто ставить отдельно фоновое изображение и фон сайта мне кажется костылем. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	16.11.2015, 01:19 [ТС]
	Короче возился возился с масштабированием, и взял просто сделал еще одну обертку #fon 2000х2000px туда запихал картинку фона, спозиционировал по центру и все нормально сейчас, а то при масштабировании до минимума все ехало кривось накось)))) да и градиент за ним теперь появился. 0