Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

нужно в коде создать три фона для страницы

olenka
 Share

Recommended Posts

olenka Community Regular

olenka

Опубліковано:
Опубліковано:

Здравствуйте. Возможно вопрос не по теме и со стилями нужно самой работать, но не получается у меня осуществить вот что

 

Это шапка сайта положение сверху по центру без повторений

u7UVvqm2w4k.jpg

это часть для контента, которая будет повторяться вниз по высоте страницы

G-nL5WdVMnE.jpg

и эта идет подвальная часть положение снизу по центру без повторений

tR6NyX9xdS8.jpg

 

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

Это дизайн с вордпресса, хотела его перенести на опенкарт могу ссылку дать на демо http://preview.wp-templates.ru/?wptheme=Happiness%20For%20Growing%20Up

 

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

Надіслати
Поділитися на інших сайтах

  • 2 weeks later...
  • 2 weeks later...
olenka Community Regular

olenka

Опубліковано:
  • Автор
Опубліковано:

В этом шаблоне я просто посмотрела файлы, как сделано. Итог такой. ТАм задаются дивки

 

в файле header.tpl (/catalog/view/theme/default/template/common)

после

 

</head>
<body>
<div id="topbg"></div>
<div id="container">

<div id="header"> 

 

 

в стилях stylesheet прописывается следующее

 

#topbg{
background: url(/catalog/view/theme/default/image/top_frame.jpg) no-repeat center;
height: 300px; 
margin-bottom: -280px; 
border-top:solid 1px #666;
}

 

Обратите внимание высота соответствует шапки, и нужно одновременно поднять другие элементы поэтому margin-bottom: -280px; 

при подгоне там все становится понятно

 

центральная часть которая повторяется - я добавила в body, к примеру так

 

body {
background: #a6d962 url(/catalog/view/theme/default/image/container_bg1.jpg) center top repeat-y;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;

} 

 

И последний этап подвал

открываю footer.tpl (/catalog/view/theme/default/template/common)

добавляю в самом конце

 

<div class="underfooter"></div>

</body></html>
 
и также присваиваю ему стили 
 
.underfooter{
background: url('/catalog/view/theme/default/image/bottom_frame.jpg') CENTER BOTTOM no-repeat;
height: 200px;
}
 
Я конечно не мастер изъясняться. но постаралась ответить как смогла
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду