Как прикрепить свой фон?

[Numi]

Всем привет. Подскажите, как можно прикрепить свой фон на сайте? Есть желание создать свой фон картинку и привязать.

Движок ocstore 1,5,5,2.

[ArtemPitov]

css,

body{

http://htmlbook.ru/css/background-image

}

[Numi]

css,

body{

http://htmlbook.ru/css/background-image

}

Спасибо :) почитал, не очень понял. Подскажите пожалуйста подробнее. Куда заливать картинку и как должен выглядеть код? Его вставлять в стиль цсс где просто указан хтмл код фона?

[Numi]

Сам попробовал. Залил картинку в папку image. Прописал в коде стилей путь. Не сработало...

[Tom]

Крепите ссылкугде это нужно сделать.И укажите папку ,в которой находится фон.

[Numi]

Крепите ссылкугде это нужно сделать.И укажите папку ,в которой находится фон.

http://rus-monetka.ru

фон находится в папке theme-default-image-fon.png

а размер фона какой должен быть?

[Tom]

Тогда так например
 
catalog/view/theme/default/stylesheet/stylesheet.css
 
находим в самом начале
 

body {
background-color: #F6FEC3;
color: #000000;
font-family: century schoolbook, helvetica, sans-serif;
margin: 2px;
padding: 2px;
}

меняем на

body {
background-color: #FFF;
background: url('../image/fon.png');
background-attachment:fixed;
color: #000000;
font-family: century schoolbook, helvetica, sans-serif;
margin: 2px;
padding: 2px;
}

[Numi]

 

Тогда так например

 

catalog/view/theme/default/stylesheet/stylesheet.css

 

находим в самом начале

 

body {
background-color: #F6FEC3;
color: #000000;
font-family: century schoolbook, helvetica, sans-serif;
margin: 2px;
padding: 2px;
}

меняем на

body {
background-color: #FFF;
background: url('../image/fon.png');
background-attachment:fixed;
color: #000000;
font-family: century schoolbook, helvetica, sans-serif;
margin: 2px;
padding: 2px;
}

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

[Tom]

С помощью  css вы можете фон этот  растянуть на весь экран,сделать фиксированным или же что бы он прокручивался вместе с контентом магазина.А дать вам точный размер картинки проблематично.Одно вам скажу заранее,слишком большие(тяжёлые) картинки  заднего фона,будут есть чей то трафик и снижать скорость загрузки страницы.Так что рекомендую не сильно увлекаться.

 

Пробуйте как говорится  "методом тыка", не получится показывайте,подскажу.

[Numi]

С помощью  css вы можете фон этот  растянуть на весь экран,сделать фиксированным или же что бы он прокручивался вместе с контентом магазина.А дать вам точный размер картинки проблематично.Одно вам скажу заранее,слишком большие(тяжёлые) картинки  заднего фона,будут есть чей то трафик и снижать скорость загрузки страницы.Так что рекомендую не сильно увлекаться.

 

Пробуйте как говорится  "методом тыка", не получится показывайте,подскажу.

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

[Numi]

Возникла проблемка. Сделал картинку и залил. С монитора все прекрасно. А с телефона и планшета боковые фоны уезжают под блоки.

Стоит 1080 пикселей. Но даже возвращал назад на стандарт 980 пикселей. Подгонял. Ничего не вышло. Как подправить чтоб и с телефона тоже ровно было? :)

[ArtemPitov]

http://htmlbook.ru/css/background-size

[Numi]

http://htmlbook.ru/css/background-size

Спасибо. Вот бы теперь понять куда и что вставлять. И как...

[ArtemPitov]

туда же 

background-size:cover;

[Numi]

туда же 

background-size:cover;[/size]

После какой строки в коде? :)

[ArtemPitov]

не ну это вы уже гоните ) 

 

body {

background: url('../image/fon.png');

background-attachment:fixed;

ВОТ сюда 

}

[Numi]

не ну это вы уже гоните ) 

 

body {

background: url('../image/fon.png');

background-attachment:fixed;

ВОТ сюда 

}

Если бы... Сделал. Все равно с телефона или планшета все уезжает под блоки.... Подскажите еще варианты народ :)

[Numi]

Готов немного заплатить специалисту за подправку :-)

[ArtemPitov]

пробуйте еще так 

 

body{

background-color: #fff;

background: url('../image/fon.png');

background-size: contain;

color: #000000;

font-family: century schoolbook, helvetica, sans-serif;

margin: 2px;

padding: 2px;

}

[Numi]

Всем спасибо! Сделали :-)