Как сделать такой задний фон? (CSS)

@Давран · Регистрация: 24.11.2013

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

Как сделать задний фон как на фото через css, то-есть, что бы цвет был голубым, но шли диагональные белые линии толщиной в 1px, отделенные друг от друга 5px.

@dimadyak · 14.09.2014, 20:10

градиентом вроде можно такое делать

@Давран · 14.09.2014, 21:45 **[ТС]**

dimadyak, Градиент вроде делает плавный переход от одного цвета к другому, а мне нужно чтоб во всей линии каждый 5px был белым, а остальные голубые

@dimadyak · 14.09.2014, 23:25

Давран,

http://jsbin.com/wimizehuqifa/... css,output

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap {
  width: 300px;
  height:300px;
  
  background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 12px,
  #465298 15px
  );
  
}

HTML5
1
 <div class="wrap"></div>

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

@Kevin5 · 14.09.2014, 23:33

Вот картинка, Название: img.png
Просмотров: 305

Размер: 167 байт

вставь в папку с html файлом.
И для body пропиши стиль

CSS
1
2
3
body {
    background-image: url(img.png);
}

@dimadyak · 14.09.2014, 23:34

Kevin5, условие , сделать фон через css а не картинкой

@Kevin5 · 14.09.2014, 23:42

Давран, В графическом редакторе создаешь картинку 5*5 с диагональю данного цвета.
А для body пропиши стиль

CSS
1
2
3
body {
    background-image: url(yourNameImage.png);
}

@Давран · 15.09.2014, 14:08 **[ТС]**

Kevin5, Так мне нужно сделать это через css, может нужно js.... Картинку поставить не сложно, но мне нужно, что бы это было написано кодом

@zackuz · 15.09.2014, 16:30

Картинку в фон через css вставь и все.

@Давран · 15.09.2014, 16:34 **[ТС]**

zackuz Я хочу научиться этому трюку. картинку на задний фон всегда можно пихнуть.

@zackuz · 15.09.2014, 16:57

Давран, Чтоб потом компы вешались и куллера быстрей кружились от простой страницы? Но согласен, знаний много не бывает.

@Давран · 15.09.2014, 16:59 **[ТС]**

zackuz, написано смешно

но разве от загрузки картинки компы не сильней нагружаются?

@zackuz · 15.09.2014, 17:12

Давран, нет. Но посмейся и иди своей дорогой медленно работающих сайтов.

@Давран · 15.09.2014, 17:14 **[ТС]**

zackuz, я то думал это совсем не сложно. Но если вам будет интересно посмотреть на пример, посетите эту страничку https://docs.google.com/forms/... Q/viewform
она безопасна. Вот там ведь не картинка

@zackuz · 15.09.2014, 17:24

Давран, не картинка нужна на сильно нагруженных серверах. Можно вообще все в js запихнуть, подгружая инфу с других серверов. Но когда дело касается динамичной страницы со многими сложностями в прорисовке и большим количеством вспомогательных элементов, наверное лучше отказаться от лишних нагрузок на процессор. По этому знаний много не бывает.

В вашем гуглоДоке нету фона.

@tgarl · 15.09.2014, 18:38

Сообщение от Давран

zackuz, я то думал это совсем не сложно. Но если вам будет интересно посмотреть на пример, посетите эту страничку https://docs.google.com/forms/... Q/viewform
она безопасна. Вот там ведь не картинка

именно картинка .png 10*10px
https://ssl.gstatic.com/docs/f... ipe-bg.png

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106

	Как сделать такой задний фон? (CSS) 14.09.2014, 18:57. Показов 4023. Ответов 15 Метки нет (Все метки) Как сделать задний фон как на фото через css, то-есть, что бы цвет был голубым, но шли диагональные белые линии толщиной в 1px, отделенные друг от друга 5px. 0

@dimadyak 9 / 9 / 6 Регистрация: 08.04.2014 Сообщений: 54
	14.09.2014, 20:10
	градиентом вроде можно такое делать 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	14.09.2014, 21:45 [ТС]
	dimadyak, Градиент вроде делает плавный переход от одного цвета к другому, а мне нужно чтоб во всей линии каждый 5px был белым, а остальные голубые 0

@dimadyak 9 / 9 / 6 Регистрация: 08.04.2014 Сообщений: 54
	14.09.2014, 23:34
	Kevin5, условие , сделать фон через css а не картинкой 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	15.09.2014, 14:08 [ТС]
	Kevin5, Так мне нужно сделать это через css, может нужно js.... Картинку поставить не сложно, но мне нужно, что бы это было написано кодом 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 16:30
	Картинку в фон через css вставь и все. 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	15.09.2014, 16:34 [ТС]
	zackuz Я хочу научиться этому трюку. картинку на задний фон всегда можно пихнуть. 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 16:57
	Давран, Чтоб потом компы вешались и куллера быстрей кружились от простой страницы? Но согласен, знаний много не бывает. 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	15.09.2014, 16:59 [ТС]
	zackuz, написано смешно но разве от загрузки картинки компы не сильней нагружаются? 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 17:12
	Давран, нет. Но посмейся и иди своей дорогой медленно работающих сайтов. 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	15.09.2014, 17:14 [ТС]
	zackuz, я то думал это совсем не сложно. Но если вам будет интересно посмотреть на пример, посетите эту страничку https://docs.google.com/forms/... Q/viewform она безопасна. Вот там ведь не картинка 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 17:24
	Давран, не картинка нужна на сильно нагруженных серверах. Можно вообще все в js запихнуть, подгружая инфу с других серверов. Но когда дело касается динамичной страницы со многими сложностями в прорисовке и большим количеством вспомогательных элементов, наверное лучше отказаться от лишних нагрузок на процессор. По этому знаний много не бывает. В вашем гуглоДоке нету фона. 1

Как сделать такой задний фон? (CSS)

Решение