Сообщений в теме: 11

[sadmagazin]

Добрый день!

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


Заранее спасибо!

[Firefly]

sadmagazin (13 Июнь 2015 - 18:34) писал:

Добрый день!

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


Заранее спасибо!

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

body {margin: 0;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;line-height: 20px;background-color: #ffffff;color: #909090;overflow-x: hidden;position: relative;}

Замените на:

body {margin: 0;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;line-height: 20px;background-image: url('ссылка на изображение фона');background-repeat: no-repeat;background-attachment: fixed;color: #909090;overflow-x: hidden;position: relative;}

Желательно использовать изображение с размерами 1920x1080px с расчетом просмотра на дисплеях с высоким разрешением экрана.

[orionych]

Firefly (13 Июнь 2015 - 19:12) писал:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

body {margin: 0;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;line-height: 20px;background-color: #ffffff;color: #909090;overflow-x: hidden;position: relative;}

Замените на:

body {margin: 0;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;line-height: 20px;background-image: url('ссылка на изображение фона');background-repeat: no-repeat;background-attachment: fixed;color: #909090;overflow-x: hidden;position: relative;}

Желательно использовать изображение с размерами 1920x1080px с расчетом просмотра на дисплеях с высоким разрешением экрана.

Простите, у меня почему-то не получается. Не подскажете, в чём может быть проблема?

[Vaccina]

Попробуйте стиль background использовать для блока:

#wrapper {
	position: relative;
}

[orionych]

Vaccina (05 Август 2015 - 06:42) писал:

Попробуйте стиль background использовать для блока:

#wrapper {
position: relative;
}

  а это где и что на что заменить?

[RayLi]

blacksun92 (05 Август 2015 - 19:56) писал:

  а это где и что на что заменить?

Здравствуйте.
Если я вас правильно понял, то сделайте, пожалуйста, следующее:
В шаблоне main.css найдите данный код:

#wrapper {
position: relative;
}

И замените его вот этим вот, например, кодом:

#wrapper {
position: relative;
background-color: #484848;
}

[orionych]

RayLi (05 Август 2015 - 20:18) писал:

Здравствуйте.
Если я вас правильно понял, то сделайте, пожалуйста, следующее:
В шаблоне main.css найдите данный код:

#wrapper {
position: relative;
}

И замените его вот этим вот, например, кодом:

#wrapper {
position: relative;
background-color: #484848;
}

Здравствуйте, спасибо за ответ.

Увы, это совсем не то.( Цвет фона изменился вместе с частью слайдера, но background картинки всё равно нет.

[Vaccina]

Фон в самом начале вы правильно установили и правильно сделали, что не убрали, в main.css найдите:

#wrapper:before {content: '';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #fff;width: 100%;height: 100%;z-index: -1;}

замените на:

#wrapper:before {content: '';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: -1;}

в данной строке указан фон, который перекрывал ваш

[orionych]

Vaccina (06 Август 2015 - 07:41) писал:

Фон в самом начале вы правильно установили и правильно сделали, что не убрали, в main.css найдите:

#wrapper:before {content: '';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #fff;width: 100%;height: 100%;z-index: -1;}

замените на:

#wrapper:before {content: '';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: -1;}

в данной строке указан фон, который перекрывал ваш

О, спасибо большое, вот теперь заработало!

[orionych]

Уточнение по данному вопросу:

Я использую, как и было оговорено, изображение 1920x1080px, однако оно, как бы выразиться, не подгоняется под ширину окна.

То есть, на одном компьютере это выглядит нормально, а на другом, с меньшей диагональю, уже совсем нет.
Подскажите, возможно ли сделать так, чтобы вне зависимости от разрешения и размера фон был виден всегда целиком?

Прикрепленные изображения

• 
• 

[Vaccina]

В main.css найдите:

body {margin: 0;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;line-height: 20px;background-image: url('background.jpg');background-repeat: no-repeat;background-attachment: fixed;color: #909090;overflow-x: hidden;position: relative;}

замените на:

body {margin: 0;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;line-height: 20px;background-image: url('background.jpg');background-repeat: no-repeat;background-attachment: fixed;background-size: contain;color: #909090;overflow-x: hidden;position: relative;}

background-size: contain;  - Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

[orionych]

Vaccina (08 Август 2015 - 05:37) писал:

background-size: contain;  - Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Теперь гораздо лучше, спасибо вам огромное!