Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 30.03.2017, 21:07   #1
DarkMare
 
Регистрация: 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/
В принципе - это то, что нужно.

Посоветуйте пж как сделать?
DarkMare вне форума Ответить с цитированием
Старый 30.03.2017, 23:21   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

для каждого блока отдельно задай отдельный фон
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 31.03.2017, 06:52   #3
DarkMare
 
Регистрация: 30.03.2017
Сообщений: 4
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
для каждого блока отдельно задай отдельный фон
Пробовал дублировать блок. Не получилось что то.

Можно немного подробней? Пожалуйста
DarkMare вне форума Ответить с цитированием
Старый 31.03.2017, 11:33   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

пример
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 31.03.2017, 19:35   #5
DarkMare
 
Регистрация: 30.03.2017
Сообщений: 4
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Видимо Вы не поняли, что я совсем деревянный.


<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.
DarkMare вне форума Ответить с цитированием
Старый 31.03.2017, 21:31   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

У тебя изображения загружаются?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 01.04.2017, 07:25   #7
DarkMare
 
Регистрация: 30.03.2017
Сообщений: 4
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
У тебя изображения загружаются?
В том и дело что нет.
Вот текст
<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>


Вот это выводится
Изображения
Тип файла: jpg 000.jpg (9.0 Кб, 122 просмотров)
DarkMare вне форума Ответить с цитированием
Старый 01.04.2017, 12:40   #8
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

ну, могу только посочувствовать, у тебя не совпадает кодировка и неправильные пути к картинкам.
Про первое: переведи файл в кодировку utf-8 (нужно его сохранять под такой кодировкой [без BOM, если спросят]), а в <head> поставь <meta charset="utf-8"/>.
Про второе: не знаю какое дерево файлов у твоего проекта, но где вот лежит твой html, он в этой же папке ищет папку images, а уже внутри нее (если она есть конечно), ищет файлы fon1.jpg и fon.jpg.
Либо проблема в пути, либо у тебя в браузере перекрыто отображение картинок, я, правда, такого лет 15 не встречал.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
На сайте не грузится несколько (всегда разных) изображений 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