Перейти к содержимому

Сервис обмена электронных валют


Два фона - или фон под фоном? Как?

#1 Sergey_Ivanisov

Sergey_Ivanisov
  • Пользователь
  • 29 сообщений
  • Репутация: 4
0

Отправлено 04 Сентябрь 2015 - 12:19

Всем привет :) подскажите вот блог: у него есть фон в виде шапки (прописан background: картинка) .... А далее идёт фон такого же цвета, как конец картинки? Короче, я как не знающий человек предположил бы, что тут два фона: 1-ый слой шапка, 2-ой слой фон. Но это вряд ли так...

izRNPuYiNRg.jpg

Подскажите, как реализовать? 

 


 

 

  • 0

#2 Evgeniy3200

Evgeniy3200
  • Пользователь PRO
  • 1 148 сообщений
  • Репутация: 268

Отправлено 04 Сентябрь 2015 - 12:53

@Sergey_Ivanisov, задается фон картинкой с параметром без дублирования и ставиться цвет (или градиент, смотря что надо).

 

Браузер отображает так:

сразу картинку в нужной позиции, но не дублирует ее, а остальную область окна (где нет картинки и впринципе под картинкой тоже) пользователя закрашивает фоном.

 

Т.е. по сути да, два фона.

background: url(images/2.jpg) no-repeat center top;

no-repeat - показывать картинку только один раз

center - по центру

top - картинка прилеплена к верху

 

Если не ошибаюсь как то так.


А вот и css отвечающий за основной фон/заливку

html {
    background: #252b3a url(images/body_bg.jpg) repeat;

repeat - замостить окно пользователя


Сообщение отредактировал Evgeniy3200: 04 Сентябрь 2015 - 12:45

  • 0

Если вы можете наугад в полной темноте пробраться к собственной кровати, ни разу не ушибившись, значит, пора путешествовать!



#3 Sergey_Ivanisov

Sergey_Ivanisov
    Topic Starter
  • Пользователь
  • 29 сообщений
  • Репутация: 4

Отправлено 04 Сентябрь 2015 - 14:29

Спасибо, то о чем вы говорите я вроде бы понимаю, но как это прописать одновременно? 

 

К примеру, у меня сейчас так: 

body.custom-background {
    background-color: #ffffff;
    background-image: url('http://sergey-ivanisov.ru/wp-content/uploads/2015/09/Shapka11.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;
}

Я хочу, чтобы весь фон под шапкой был ещё один повторяющимся рисунком (клеточками)..

 

Что конкретно мне нужно дописать? 


  • 0

#4 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 718 сообщений
  • Репутация: 408

Отправлено 04 Сентябрь 2015 - 15:38

@Sergey_Ivanisov, если я правильно понял задачу, то для body в качестве background надо задать url рисунка с "клеточками", только уже repeat (а не "no-repeat"). Получите бэкграунд "клеточками", но без шапки.

 

Потом внутри body создаете div для которого в стилях указываете

background-image: url('http://sergey-ivanis...09/Shapka11.jpg'); background-repeat: no-repeat;
Таким образом фон этого div-а будет накладываться сверху на фон всего документа...

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#5 Sergey_Ivanisov

Sergey_Ivanisov
    Topic Starter
  • Пользователь
  • 29 сообщений
  • Репутация: 4

Отправлено 04 Сентябрь 2015 - 16:37

Спасибо, всё получилось)) правда немного иначе) оказалось бэкграунд шапки у меня и так принадлежал другому блоку. 


  • 0


Оформление форума – IPBSkins.ru