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


Как Вместо Белого Фона Установить Свою Фоновую Картинку.

Фон

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 10

#1 Ionadav

Ionadav

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 25 Август 2015 - 20:59

Здравствуйте! Можно ли установить вместо белого фона свою фоновую картинку и какого размера? Спасибо!

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Август 2015 - 01:30

В main.css найдите:
body {
	font-family: "Ubuntu",sans-serif;
	height: 100%;
	width: 100%;
	line-height: 1.6;
	font-size: 14px;
	box-sizing: border-box;
	overflow-x: hidden;
	background-color: #fff;
	margin: 0px;
	padding: 0px;
	color: #1E1E1E;
}
замените на:
body {
	font-family: "Ubuntu",sans-serif;
	height: 100%;
	width: 100%;
	line-height: 1.6;
	font-size: 14px;
	box-sizing: border-box;
	overflow-x: hidden;
	background: url('ссылка на фоновую картинку') center center;
	margin: 0px;
	padding: 0px;
	color: #1E1E1E;
}

в данном блоке измените текст на ссылку

#3 Ionadav

Ionadav

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 27 Август 2015 - 12:51

Просмотр сообщенияVaccina (26 Август 2015 - 01:30) писал:

В main.css найдите:
body {
font-family: "Ubuntu",sans-serif;
height: 100%;
width: 100%;
line-height: 1.6;
font-size: 14px;
box-sizing: border-box;
overflow-x: hidden;
background-color: #fff;
margin: 0px;
padding: 0px;
color: #1E1E1E;
}
замените на:
body {
font-family: "Ubuntu",sans-serif;
height: 100%;
width: 100%;
line-height: 1.6;
font-size: 14px;
box-sizing: border-box;
overflow-x: hidden;
background: url('ссылка на фоновую картинку') center center;
margin: 0px;
padding: 0px;
color: #1E1E1E;
}

в данном блоке измените текст на ссылку
Скажите пожалуйста, какого размера желательно устанавливать картинку для фона?

#4 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 27 Август 2015 - 13:46

Просмотр сообщенияIonadav (27 Август 2015 - 12:51) писал:

Скажите пожалуйста, какого размера желательно устанавливать картинку для фона?

Здравствуйте.
Для фона желательно использовать либо небольшое изображение (однотонное) с использованием параметра повтора repeat (по горизонтали или по вертикали), либо изображение с разрешением 1920x1080px с расчетом просмотра сайта на мониторах с Full-HD разрешением.

#5 Ionadav

Ionadav

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 27 Август 2015 - 17:15

Просмотр сообщенияVaccina (26 Август 2015 - 01:30) писал:

В main.css найдите:
body {
font-family: "Ubuntu",sans-serif;
height: 100%;
width: 100%;
line-height: 1.6;
font-size: 14px;
box-sizing: border-box;
overflow-x: hidden;
background-color: #fff;
margin: 0px;
padding: 0px;
color: #1E1E1E;
}
замените на:
body {
font-family: "Ubuntu",sans-serif;
height: 100%;
width: 100%;
line-height: 1.6;
font-size: 14px;
box-sizing: border-box;
overflow-x: hidden;
background: url('ссылка на фоновую картинку') center center;
margin: 0px;
padding: 0px;
color: #1E1E1E;
}

в данном блоке измените текст на ссылку
Здравствуйте установил картинку размером 1920х1080, но она не коректно отображается, белый фон остался и только маленький кусочик картинки появился вверху и внизу.

#6 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 27 Август 2015 - 17:51

Просмотр сообщенияIonadav (27 Август 2015 - 17:15) писал:

Здравствуйте установил картинку размером 1920х1080, но она не коректно отображается, белый фон остался и только маленький кусочик картинки появился вверху и внизу.

Для подвала:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#footer .footer-top {background: #f2f2f2;font-size: 12px;line-height: 21px;padding: 50px 0 13px;}

Замените на:
#footer .footer-top {/* background: #f2f2f2; */font-size: 12px;line-height: 21px;padding: 50px 0 13px;}

Найдите код:
#footer .footer-bottom {background: #f7f7f7;border-top-width: 1px;border-color: #e1e1e1;font-size: 11px;line-height: 17px;padding: 21px 0 20px;}

Замените на:
#footer .footer-bottom {/* background: #f7f7f7; */border-top-width: 1px;border-color: #e1e1e1;font-size: 11px;line-height: 17px;padding: 21px 0 20px;}

Так же можно убрать белый фон с основного контента, но необходимо учесть, что с таким фоновым изображением, как установлено сейчас, текст на странице будет слабо различим из-за сливания цветов.
Найдите код:
.main-container {background: #ffffff;}

Замените на:
.main-container {/* background: #ffffff; */}

Для шапки:
Найдите код:
.fixed-header .header-wrapper {background: #fff;-webkit-transition: background 0.2s linear;transition: background 0.2s linear;}

Замените на:
.fixed-header .header-wrapper {/* background: #fff; */-webkit-transition: background 0.2s linear;transition: background 0.2s linear;}

Как вариант, Вы можете использовать прозрачность у блока. Для этого в первом коде замените #ffffff на rgba(255,255,255,0.8).
Аналогично можно использовать данную замену и для предыдущих блоков.

Так же, т.к. Вы установили не однотонный фон его лучше будет закрепить, для этого в main.css найдите код:
body {font-family: 'Ubuntu', sans-serif;height: 100%;width:100%;line-height: 1.6;font-size: 14px;-webkit-appearance: none;-webkit-font-smoothing: antialiased;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;overflow-x: hidden;background: url('fon.jpg') center center;margin: 0;padding: 0;color: #1e1e1e;}

Замените на:
body {font-family: 'Ubuntu', sans-serif;height: 100%;width:100%;line-height: 1.6;font-size: 14px;-webkit-appearance: none;-webkit-font-smoothing: antialiased;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;overflow-x: hidden;background: url('fon.jpg') center center;background-attachment: fixed;margin: 0;padding: 0;color: #1e1e1e;}


#7 Ionadav

Ionadav

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 28 Август 2015 - 14:03

Просмотр сообщенияFirefly (27 Август 2015 - 17:51) писал:

Для подвала:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#footer .footer-top {background: #f2f2f2;font-size: 12px;line-height: 21px;padding: 50px 0 13px;}

Замените на:
#footer .footer-top {/* background: #f2f2f2; */font-size: 12px;line-height: 21px;padding: 50px 0 13px;}

Найдите код:
#footer .footer-bottom {background: #f7f7f7;border-top-width: 1px;border-color: #e1e1e1;font-size: 11px;line-height: 17px;padding: 21px 0 20px;}

Замените на:
#footer .footer-bottom {/* background: #f7f7f7; */border-top-width: 1px;border-color: #e1e1e1;font-size: 11px;line-height: 17px;padding: 21px 0 20px;}

Так же можно убрать белый фон с основного контента, но необходимо учесть, что с таким фоновым изображением, как установлено сейчас, текст на странице будет слабо различим из-за сливания цветов.
Найдите код:
.main-container {background: #ffffff;}

Замените на:
.main-container {/* background: #ffffff; */}

Для шапки:
Найдите код:
.fixed-header .header-wrapper {background: #fff;-webkit-transition: background 0.2s linear;transition: background 0.2s linear;}

Замените на:
.fixed-header .header-wrapper {/* background: #fff; */-webkit-transition: background 0.2s linear;transition: background 0.2s linear;}

Как вариант, Вы можете использовать прозрачность у блока. Для этого в первом коде замените #ffffff на rgba(255,255,255,0.8).
Аналогично можно использовать данную замену и для предыдущих блоков.

Так же, т.к. Вы установили не однотонный фон его лучше будет закрепить, для этого в main.css найдите код:
body {font-family: 'Ubuntu', sans-serif;height: 100%;width:100%;line-height: 1.6;font-size: 14px;-webkit-appearance: none;-webkit-font-smoothing: antialiased;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;overflow-x: hidden;background: url('fon.jpg') center center;margin: 0;padding: 0;color: #1e1e1e;}

Замените на:
body {font-family: 'Ubuntu', sans-serif;height: 100%;width:100%;line-height: 1.6;font-size: 14px;-webkit-appearance: none;-webkit-font-smoothing: antialiased;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;overflow-x: hidden;background: url('fon.jpg') center center;background-attachment: fixed;margin: 0;padding: 0;color: #1e1e1e;}
Здравствуйте, спасибо за советы очень помогло, но у меня немножко не получилось с шапкой. У меня на главной странице шапка наехала на слайдер, как можно опустить ниже слайдер что бы шапка на него не наезжала? И еще на других страницах в вверху у меня появилась белая полоса. Спасибо!

#8 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 28 Август 2015 - 14:39

Просмотр сообщенияIonadav (28 Август 2015 - 14:03) писал:

Здравствуйте, спасибо за советы очень помогло, но у меня немножко не получилось с шапкой. У меня на главной странице шапка наехала на слайдер, как можно опустить ниже слайдер что бы шапка на него не наезжала? И еще на других страницах в вверху у меня появилась белая полоса. Спасибо!

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#slider1_container {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 500px; overflow: hidden;z-index:1;}

Замените на:
#slider1_container {position: relative; margin: 0 auto;top: 50px; left: 0px; width: 1920px; height: 500px; overflow: hidden;z-index:1;}

Чтобы скрыть белую полосу и немного опустить вниз надпись от шапки:
Найдите код:
.breadcrumb-box {background: #f2f2f2;overflow: hidden;margin-top:18px;}
.breadcrumb {background: #f2f2f2;color: #7f7f7f;font-size: 11px;line-height: 18px;margin: 0 !important;padding: 11px 0;list-style:none;}

Замените на:
.breadcrumb-box {/* background: #f2f2f2; */overflow: hidden;margin-top: 30px;}
.breadcrumb {/* background: #f2f2f2; */color: #7f7f7f;font-size: 11px;line-height: 18px;margin: 0 !important;padding: 11px 0;list-style:none;}


#9 Ionadav

Ionadav

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 28 Август 2015 - 15:37

Просмотр сообщенияFirefly (28 Август 2015 - 14:39) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#slider1_container {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 500px; overflow: hidden;z-index:1;}

Замените на:
#slider1_container {position: relative; margin: 0 auto;top: 50px; left: 0px; width: 1920px; height: 500px; overflow: hidden;z-index:1;}

Чтобы скрыть белую полосу и немного опустить вниз надпись от шапки:
Найдите код:
.breadcrumb-box {background: #f2f2f2;overflow: hidden;margin-top:18px;}
.breadcrumb {background: #f2f2f2;color: #7f7f7f;font-size: 11px;line-height: 18px;margin: 0 !important;padding: 11px 0;list-style:none;}

Замените на:
.breadcrumb-box {/* background: #f2f2f2; */overflow: hidden;margin-top: 30px;}
.breadcrumb {/* background: #f2f2f2; */color: #7f7f7f;font-size: 11px;line-height: 18px;margin: 0 !important;padding: 11px 0;list-style:none;}
Спасибо большое! Стало так как хотелось! :D

#10 apelsinka

apelsinka

    Новичок

  • Пользователи
  • Pip
  • 5 сообщений

Отправлено 07 Июль 2017 - 05:51

Добрый день. Я здесь новичок и не все еще понимаю..у меня не получается заменить фон . вот это вставила , но ничего не изменилось
body {
        font-family: "Ubuntu",sans-serif;
        height: 100%;
        width: 100%;
        line-height: 1.6;
        font-size: 14px;
        box-sizing: border-box;
        overflow-x: hidden;
        background: url('<img src="{ASSETS_IMAGES_PATH}11.jpg" alt="" title="" />') center center;
        margin: 0px;
        padding: 0px;
        color: #1E1E1E;
}

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 07 Июль 2017 - 05:56

Здравствуйте.

Замените код из сообщения выше на следующий:
body {
		font-family: "Ubuntu",sans-serif;
		height: 100%;
		width: 100%;
		line-height: 1.6;
		font-size: 14px;
		box-sizing: border-box;
		overflow-x: hidden;
		background: url('{ASSETS_IMAGES_PATH}11.jpg') center center;
		margin: 0px;
		padding: 0px;
		color: #1E1E1E;
}

сам фон загрузите в раздел Сайт - Редактор шаблонов.





Темы с аналогичным тегами Фон

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных