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


Помогите Фон Изменить

Автор mir airsoft, 08 мая 2013 07:58

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

#1 mir airsoft

mir airsoft

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

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

Отправлено 08 Май 2013 - 07:58

Добрый день, помогите вставить картинку в качестве фона, так что бы она шла от самого верха (начиная с шапки) к самому низу, а то даже пользуясь описанными на форуме способами у меня никак не получается... вот картинка:

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

  • 111.2.jpg

#2 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 08 Май 2013 - 08:33

Просмотр сообщенияmir airsoft (08 Май 2013 - 07:58) писал:

Добрый день, помогите вставить картинку в качестве фона, так что бы она шла от самого верха (начиная с шапки) к самому низу, а то даже пользуясь описанными на форуме способами у меня никак не получается... вот картинка:
Найдите код в файле main.css:
body {
  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background-color: #FFF;
  color: #666;
}
и замените на:
body {
  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background-color: #FFF;
  color: #666;
background:url("{ASSETS_IMAGES_PATH}название изображения") repeat left top ;
}
изображение нужно загрузить в Сайт-Редактор тем-Файлы

Далее нужно найти код:
#headerWrap {
height: 213px;
background: url(http://design.mir-airsoft.ru/header_bg.jpg) repeat-x;
}
и замените на:
#headerWrap {
height: 213px;
}
Найдите код:
#contentWrap {
clear: both;
background: url(http://design.mir-airsoft.ru/contentWrap_bg.jpg) repeat-x left bottom;
}
и замените на:
#contentWrap {
clear: both;
}
Найдите код:
#footer {
background: url("http://design.mir-airsoft.ru/botfade.jpg") repeat-x 50% 100%;
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}
и замените на:
#footer {
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}

#3 mir airsoft

mir airsoft

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

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

Отправлено 08 Май 2013 - 09:08

Благодарю за ответ))) то что хотела, только у меня видимо картинка большая по размеру, я правильно понимаю, что картинку сначала нужно отредактировать нарисовав внутри белое поле? подскажите еще, пожалуйста, каких размеров вообще должно быть изображение?

#4 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 08 Май 2013 - 09:52

Просмотр сообщенияmir airsoft (08 Май 2013 - 09:08) писал:

Благодарю за ответ))) то что хотела, только у меня видимо картинка большая по размеру, я правильно понимаю, что картинку сначала нужно отредактировать нарисовав внутри белое поле? подскажите еще, пожалуйста, каких размеров вообще должно быть изображение?

Здесь можно поступить разными способами. Можете залить фон серого. А потом наложить белый фон на контент. Можно залить сразу с белой частью отредактировав изображение в редакторе.
Размеры изображения тоже могут быть разными. По скольку можно взять маленький кусочек изображение и сделать повтор по осям.

#5 mir airsoft

mir airsoft

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

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

Отправлено 08 Май 2013 - 10:16

Просмотр сообщенияmiyako (08 Май 2013 - 09:52) писал:

Здесь можно поступить разными способами. Можете залить фон серого. А потом наложить белый фон на контент. Можно залить сразу с белой частью отредактировав изображение в редакторе.
Размеры изображения тоже могут быть разными. По скольку можно взять маленький кусочек изображение и сделать повтор по осям.

напишите тогда, пожалуйста, как залить белый фон на контент) так наверно будет проще чем подгонять белое поле в редакторе...

#6 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 08 Май 2013 - 10:30

Просмотр сообщенияmir airsoft (08 Май 2013 - 10:16) писал:

напишите тогда, пожалуйста, как залить белый фон на контент) так наверно будет проще чем подгонять белое поле в редакторе...
Для заливки контента белым фоном.


В файле "main.css".
Найти код:
#contentMainTb {width: 960px;margin:0;border-collapse: collapse;border-spacing: 0;}
Заменить:
#contentMainTb {width: 960px;margin:0;border-collapse: collapse;border-spacing: 0;background: white;}

#7 mir airsoft

mir airsoft

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

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

Отправлено 10 Май 2013 - 05:58

Просмотр сообщенияKoderhan (08 Май 2013 - 10:30) писал:

Для заливки контента белым фоном.


В файле "main.css".
Найти код:
#contentMainTb {width: 960px;margin:0;border-collapse: collapse;border-spacing: 0;}
Заменить:
#contentMainTb {width: 960px;margin:0;border-collapse: collapse;border-spacing: 0;background: white;}


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

#8 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 10 Май 2013 - 13:29

В файле main.css найдите блок 
#footer {
background: url("http://design.mir-airsoft.ru/botfade.jpg") repeat-x 50% 100%;
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}
и замените его на 
#footer {
background: white;
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}
  и найдите блок 
#headerWrap {
height: 190px;
background: url(http://design.mir-airsoft.ru/header_bg.jpg) repeat-x;
}
замените его на 
#headerWrap {
height: 190px;
background: white;
}

#9 mir airsoft

mir airsoft

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

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

Отправлено 12 Май 2013 - 11:31

Просмотр сообщенияStasya (10 Май 2013 - 13:29) писал:

В файле main.css найдите блок 
#footer {
background: url("http://design.mir-airsoft.ru/botfade.jpg") repeat-x 50% 100%;
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}
и замените его на 
#footer {
background: white;
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}
  и найдите блок 
#headerWrap {
height: 190px;
background: url(http://design.mir-airsoft.ru/header_bg.jpg) repeat-x;
}
замените его на 
#headerWrap {
height: 190px;
background: white;
}

Спасибо, но опять не то... прикрепила картинку: нужно что бы серый фон распространился на поля под цифрой 1., а весь центр (цифра 2) остался белым, такое возможно?

Прикрепленные файлы


#10 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 12 Май 2013 - 13:45

Просмотр сообщенияmir airsoft (12 Май 2013 - 11:31) писал:

Спасибо, но опять не то... прикрепила картинку: нужно что бы серый фон распространился на поля под цифрой 1., а весь центр (цифра 2) остался белым, такое возможно?

Найдите код:
#contentMainTb {
width: 960px;
margin: 0;
border-collapse: collapse;
border-spacing: 0;
}
и замените на:
#contentMainTb {
width: 960px;
margin: 0;
border-collapse: collapse;
border-spacing: 0;
background: white; /*фон контента*/
}

Найдите код:
#header {
position: relative;
width: 960px;
height: 190px;
margin: 0 auto;
}
и замените на:
#header {
position: relative;
width: 960px;
height: 190px;
margin: 0 auto;
background: white; /*фон шапки*/
}

Найдите код:
#headerWrap {
height: 190px;
background: url(http://design.mir-airsoft.ru/header_bg.jpg) repeat-x;
}
и замените на:
#headerWrap {
height: 190px;
}

Найдите код:
#contentWrap {
clear: both;
background: url(http://design.mir-airsoft.ru/contentWrap_bg.jpg) repeat-x left bottom;
}
и замените на:
#contentWrap {
clear: both;
}

Далее найдите код:
#footer {
background: url("http://design.mir-airsoft.ru/botfade.jpg") repeat-x 50% 100%;
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}
и замените на:
#footer {
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}

Найдите код:
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
background-color: #FFF;
color: #666;
}
и замените на:
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
background-color: #FFF;
color: #666;
background: url("{ASSETS_IMAGES_PATH}название изображения") repeat;
}

Само изображение добавьте в раздел Сайт-Редактор тем-файлы

#11 mir airsoft

mir airsoft

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

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

Отправлено 16 Май 2013 - 08:28

Спасибо, вот и получилась красота))) :lol:

Просмотр сообщенияmiyako (12 Май 2013 - 13:45) писал:

Найдите код:
#contentMainTb {
width: 960px;
margin: 0;
border-collapse: collapse;
border-spacing: 0;
}
и замените на:
#contentMainTb {
width: 960px;
margin: 0;
border-collapse: collapse;
border-spacing: 0;
background: white; /*фон контента*/
}

Найдите код:
#header {
position: relative;
width: 960px;
height: 190px;
margin: 0 auto;
}
и замените на:
#header {
position: relative;
width: 960px;
height: 190px;
margin: 0 auto;
background: white; /*фон шапки*/
}

Найдите код:
#headerWrap {
height: 190px;
background: url(http://design.mir-airsoft.ru/header_bg.jpg) repeat-x;
}
и замените на:
#headerWrap {
height: 190px;
}

Найдите код:
#contentWrap {
clear: both;
background: url(http://design.mir-airsoft.ru/contentWrap_bg.jpg) repeat-x left bottom;
}
и замените на:
#contentWrap {
clear: both;
}

Далее найдите код:
#footer {
background: url("http://design.mir-airsoft.ru/botfade.jpg") repeat-x 50% 100%;
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}
и замените на:
#footer {
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}

Найдите код:
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
background-color: #FFF;
color: #666;
}
и замените на:
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
background-color: #FFF;
color: #666;
background: url("{ASSETS_IMAGES_PATH}название изображения") repeat;
}

Само изображение добавьте в раздел Сайт-Редактор тем-файлы

Спасибо, вот и получилась красота))) :lol:

#12 mir airsoft

mir airsoft

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

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

Отправлено 16 Май 2013 - 09:29

может кому-то поможет: я вместо background: white; /*фон шапки*/ вставила background: url(свой фон.jpg) repeat-x; repeat можно менять и в подвале то ж оставила background: url(свой фон.jpg") repeat-x 50%100%

#13 gararamax5

gararamax5

    Продвинутый пользователь

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

Отправлено 05 Июнь 2013 - 12:16

Здравствуйте, возможно ли сделать как на прикрепленных рисунках? www.plast-chehol.ru

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

  • DSC03067.JPG
  • DSC03069.JPG

#14 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 05 Июнь 2013 - 13:15

Просмотр сообщенияgararamax5 (05 Июнь 2013 - 12:16) писал:

Здравствуйте, возможно ли сделать как на прикрепленных рисунках? www.plast-chehol.ru

Найдите код в main.css:
#headerWrap {
height: 150px;
background: url({ASSETS_IMAGES_PATH}header_bg.jpg) repeat-x;
}
и замените на:
#headerWrap {
height: 150px;
}
Найдите код:
#header {
position: relative;
width: 960px;
height: 150px;
margin: 0 auto;
}
и замените на:
#header {
position: relative;
width: 960px;
height: 150px;
margin: 0 auto;
background: url("{ASSETS_IMAGES_PATH}header_bg.jpg") repeat-x;
}
Найдите код:
#contentWrap {
clear: both;
background: url({ASSETS_IMAGES_PATH}contentWrap_bg.jpg) repeat-x left bottom;
}
и замените на:
#contentWrap {
clear: both;
}
Найдите код:
#content {
width: 960px;
margin: 0 auto;
}
и замените на:
#content {
width: 960px;
margin: 0 auto;
background: url("{ASSETS_IMAGES_PATH}contentWrap_bg.jpg");
}


#footer {
background: url("{ASSETS_IMAGES_PATH}botfade.jpg") repeat-x 50% 100%;
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}
и замените на:
#footer {
background: url("{ASSETS_IMAGES_PATH}botfade.jpg") repeat-x 50% 100%;
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
margin: 0 auto;
width: 960px;
}

#15 gararamax5

gararamax5

    Продвинутый пользователь

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

Отправлено 05 Июнь 2013 - 23:34

Спасибо, получилось. А теперь как установить свой фон, чтобы он отображался как у mir soft (точечный рисунок.bmp в сообщении от 12 мая 2013г.), не меняя фон контента на белый.

#16 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 06 Июнь 2013 - 16:10

Во-первых рисунок нужно делать в формате png или jpg. Во-вторых чтобы поставить фон, Вам нужно загрузить к себе в файлы данную картинку, затем в файле main.css найдите блок 
#contentWrap {
clear: both;
background: url(http://foigjoeigjoerjgiojg.storeland.net/contentWrap_bg.jpg) repeat-x left bottom;
}
и замените его на 
#contentWrap {
clear: both;
background: url({ASSETS_IMAGES_PATH}[b]название картинки[/b]) repeat-x left bottom;
}
за место название картинки поставьте реально имя картинки, например, точечный рисунок.jpg

#17 gararamax5

gararamax5

    Продвинутый пользователь

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

Отправлено 06 Июнь 2013 - 23:11

Stasya ничего не изменилось.

#18 Vaccina

Vaccina

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

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

Отправлено 07 Июнь 2013 - 01:32

на данный момент у вас в сл.блок кода:
#contentWrap {
	background: url("/design/contentWrap_bg.jpg") repeat-x scroll left bottom transparent;
	clear: both;
}
не изменен фон

#19 gararamax5

gararamax5

    Продвинутый пользователь

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

Отправлено 07 Июнь 2013 - 23:20

Сейчас прописал вышеуказанный код, но это совсем не то, что хотелось.

#20 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 08 Июнь 2013 - 01:17

Найдите в вашем файле стилей main.css

#content {
	margin: 0 auto;
	width: 960px;
}

и замените на

#content {
	background: #FFFFFF;
	margin: 0 auto;
	width: 960px;
}

далее найдите

#contentWrap {
	background: url("/design/фон1.png") repeat-x scroll left bottom transparent;
	clear: both;
}

и замените на

#contentWrap {
	background: url("/design/фон1.png") repeat scroll left bottom transparent;
	clear: both;
}

Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Изменение общей стилистики
  6. Privacy Policy