|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
30.03.2017, 21:07 | #1 |
Регистрация: 30.03.2017
Сообщений: 4
|
Несколько фоновых изображений на сайте
Доброе время суток!
Изучаю понемногу CSS для применения в верстке сайта. Хочу сделать несколько фиксированных фоновых изображений, чтобы при прокрутке каждого тематического блока под ним прокручивалось соответствующее фоновое изображение. Дело в том, что если использовать несколько изображений background-image:url(images/fon.jpg), url(images/fon1.jpg); они перекрывают друг друга. Свойства фона описываются так (нужно растянуть картинку на 100% по ширине экрана): background-image:url(images/fon.jpg), url(images/fon1.jpg); moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; Пример сайта: http://mebelsotis.ru/ В принципе - это то, что нужно. Посоветуйте пж как сделать? |
30.03.2017, 23:21 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
для каждого блока отдельно задай отдельный фон
Alar, верни репу!
|
31.03.2017, 06:52 | #3 |
Регистрация: 30.03.2017
Сообщений: 4
|
|
31.03.2017, 19:35 | #5 | |
Регистрация: 30.03.2017
Сообщений: 4
|
Цитата:
<head> <title>Фиксированный фон на сайте</title> <style type="text/css"> body .section { height: 70vh; background: 50% 50%/cover fixed no-repeat; } .section-a { background-image: url(images/fon.jpg); } .section-b { background-image: url(images/fon1.jpg); } .separator { height: 100px; } </style> </head> <body> <div class="section section-a"></div> <div class="separator"></div> <div class="section section-b"></div> <div class="separator"></div> <div class="section section-a"></div> </body> </html> Вот так собрал Не шевелится Может ли это быть потому что я его просматриваю локально на компьютере?! Последний раз редактировалось DarkMare; 31.03.2017 в 19:44. |
|
31.03.2017, 21:31 | #6 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
У тебя изображения загружаются?
Alar, верни репу!
|
01.04.2017, 07:25 | #7 |
Регистрация: 30.03.2017
Сообщений: 4
|
В том и дело что нет.
Вот текст <head> <title>Фиксированный фон на сайте</title> <style type="text/css"> body .section { height: 70vh; background: 50% 50%/cover fixed no-repeat; } .section-a { background-image: url(images/fon.jpg); } .section-b { background-image: url(images/fon1.jpg); } .separator { height: 100px; } </style> </head> <body> ТЕКСТ1 <div class="section section-a"></div> ТЕКСТ2 <div class="separator"></div> ТЕКСТ3 <div class="section section-b"></div> ТЕКСТ4 <div class="separator"></div> ТЕКСТ5 <div class="section section-a"></div> </body> </html> Вот это выводится |
01.04.2017, 12:40 | #8 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
ну, могу только посочувствовать, у тебя не совпадает кодировка и неправильные пути к картинкам.
Про первое: переведи файл в кодировку utf-8 (нужно его сохранять под такой кодировкой [без BOM, если спросят]), а в <head> поставь <meta charset="utf-8"/>. Про второе: не знаю какое дерево файлов у твоего проекта, но где вот лежит твой html, он в этой же папке ищет папку images, а уже внутри нее (если она есть конечно), ищет файлы fon1.jpg и fon.jpg. Либо проблема в пути, либо у тебя в браузере перекрыто отображение картинок, я, правда, такого лет 15 не встречал.
Alar, верни репу!
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
На сайте не грузится несколько (всегда разных) изображений | Rayled | PHP | 1 | 09.11.2015 16:28 |
Вывод изображений по несколько на страниц | Putin-mode | PHP | 2 | 10.10.2012 21:49 |
Несколько изображений в listbox | Tony. | Общие вопросы Delphi | 4 | 16.06.2012 16:09 |
Virtual Treeview и несколько изображений | grafgrial | Общие вопросы Delphi | 2 | 04.07.2011 19:57 |
Динамическая установка прозрачности фоновых изображений в Windows.Forms | lexluther | Общие вопросы .NET | 0 | 08.08.2008 11:36 |