Как сделать фон из двух цветов?

@dumaqqq · Регистрация: 28.06.2012

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

Суть в том, что хочу сделать вертикально пол экрана белый фон, а вторая - черный.
Можно ли реализовать в html?

@vovandr · 11.07.2014, 17:00

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
html, body{
  height: 100%;
}
body{
  background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 50%, #ffffff 50%, #ffffff 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#000000), color-stop(50%,#ffffff), color-stop(50%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000000 50%,#ffffff 50%,#ffffff 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #000000 50%,#ffffff 50%,#ffffff 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #000000 50%,#ffffff 50%,#ffffff 50%); /* IE10+ */
background: linear-gradient(to bottom, #000000 50%,#ffffff 50%,#ffffff 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

@_Я_ · 11.07.2014, 17:02

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;}
#bg:after,
#bg:before {
  content: "";
  display: block;
  height: 50%;
  left: 0;
  width: 100%;}
#bg:after {
  background-color: #000;
  bottom: 0;}
#bg:before {
  background-color: #f00;
  top: 0;}

HTML5
1
<div id="bg"></div>

@dumaqqq · 15.07.2014, 17:49 **[ТС]**

Это горизонтальное , а как сделать именно вертикально. Левая сторона-черная, правая-белая?

@_Я_ · 15.07.2014, 17:52

замени

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
#bg:after,
#bg:before {
  content: "";
  display: block;
  height: 100%;
  top: 0;
  width: 50%;}
#bg:after {
  background-color: #fff;
  right: 0;}
#bg:before {
  background-color: #000;
  left: 0;}

@dumaqqq · 15.07.2014, 17:53 **[ТС]**

_Я_,
Сделал уже так, поменял высоту и ширину. В итоге раздвоилось вообще...

@vovandr · 15.07.2014, 17:55

CSS
1
2
3
4
5
6
7
8
9
10
body{
  background: #000000; /* Old browsers */
background: -moz-linear-gradient(left, #000000 50%, #ffffff 50%, #ffffff 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left left, left right, color-stop(50%,#000000), color-stop(50%,#ffffff), color-stop(50%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 50%,#ffffff 50%,#ffffff 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 50%,#ffffff 50%,#ffffff 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 50%,#ffffff 50%,#ffffff 50%); /* IE10+ */
background: linear-gradient(to right, #000000 50%,#ffffff 50%,#ffffff 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

@_Я_ · 15.07.2014, 17:58

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
<!DOCTYPE html>
<meta charset="utf-8">
<title>BG</title>
<style>
body {margin: 0;}
 
#bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;}
#bg:after,
#bg:before {
  content: "";
  display: block;
  height: 100%%;
  position: absolute;
  top: 0;
  width: 50%;}
#bg:after {
  background-color: #f00;
  right: 0;}
#bg:before {
  background-color: #000;
  left: 0;}
</style>
<div id="bg"></div>

@dumaqqq · 15.07.2014, 18:10 **[ТС]**

Получилось, в одном файле. А я пытался отдельно css и html.
Спасибо!

@_Я_ · 15.07.2014, 18:11

dumaqqq,

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

А я пытался отдельно css и html.

и это правильно, конечно смотря какая задача стоит в конечном счете

@dumaqqq · 28.09.2014, 20:54 **[ТС]**

Еще такой вопрос, можно ли поверх этого кода вставить картинку? Пытался по-разному вставить, и просто код изображения и через еще один div - результата ноль, или картинка или фон

Сообщение от _Я_

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
<!DOCTYPE html>
<meta charset="utf-8">
<title>BG</title>
<style>
body {margin: 0;}
 
#bg {
* height: 100%;
* left: 0;
* position: absolute;
* top: 0;
* width: 100%;
* z-index: 1;}
#bg:after,
#bg:before {
* content: "";
* display: block;
* height: 100%%;
* position: absolute;
* top: 0;
* width: 50%;}
#bg:after {
* background-color: #f00;
* right: 0;}
#bg:before {
* background-color: #000;
* left: 0;}
</style>
<div id="bg"></div>

@kirill1059 · 28.09.2014, 21:49

HTML5
1
2
3
4
<body>
<div class="firstbg"></div>
<div class="secondbg"></div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
.firstbg {
    background: black;
    width:100%;
    height:300px;
}
 
.secondbg {
    background: red;
    width:100%;
    height:300px;
}

http://jsfiddle.net/c31xmkq3/

@dumaqqq · 23.11.2014, 17:07 **[ТС]**

Можно ли поверх этого кода вставить картинку? Пытался по-разному вставить, и просто код изображения и через еще один div - результата ноль, или картинка или фон

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
<!DOCTYPE html>
<meta charset="utf-8">
<title>BG</title>
<style>
body {margin: 0;}
 
#bg {
* height: 100%;
* left: 0;
* position: absolute;
* top: 0;
* width: 100%;
* z-index: 1;}
#bg:after,
#bg:before {
* content: "";
* display: block;
* height: 100%%;
* position: absolute;
* top: 0;
* width: 50%;}
#bg:after {
* background-color: #f00;
* right: 0;}
#bg:before {
* background-color: #000;
* left: 0;}
</style>
<div id="bg"></div>

@Konark · 04.04.2017, 21:52

Наткнулся на эту старую тему. Но, почему никто не предложил намного лучше вариант?

CSS
1
background: linear-gradient(to right, #fff 50%, #000 50%);

Новые блоги и статьи Все статьи Все блоги /
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 Использованы. . .

@dumaqqq 3 / 3 / 0 Регистрация: 28.06.2012 Сообщений: 69

	Как сделать фон из двух цветов? 11.07.2014, 16:53. Показов 27887. Ответов 13 Метки нет (Все метки) Суть в том, что хочу сделать вертикально пол экрана белый фон, а вторая - черный. Можно ли реализовать в html? 0

@dumaqqq 3 / 3 / 0 Регистрация: 28.06.2012 Сообщений: 69
	15.07.2014, 17:49 [ТС]
	Это горизонтальное , а как сделать именно вертикально. Левая сторона-черная, правая-белая? 0

@dumaqqq 3 / 3 / 0 Регистрация: 28.06.2012 Сообщений: 69
	15.07.2014, 17:53 [ТС]
	_Я_, Сделал уже так, поменял высоту и ширину. В итоге раздвоилось вообще... 0

@dumaqqq 3 / 3 / 0 Регистрация: 28.06.2012 Сообщений: 69
	15.07.2014, 18:10 [ТС]
	Получилось, в одном файле. А я пытался отдельно css и html. Спасибо! 0

Как сделать фон из двух цветов?

Решение