Автор Тема: Бэкграунд.  (Прочитано 1463 раз)

07 Март 2013, 21:19:01
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Йо.
Подскажите как грамотно сделать бекграунд. Шаблон у меня престовский стандартный - он не на весь экран.  Хочу бэкграунд две синие полосы полосы по бокам.

Щас просто взял разрешение своего экрана, нарисовал бекграунд, на моем компе всё норм отображается, на планшете полный хаос цветов )

Спасибо :)
07 Март 2013, 22:52:13
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86688
  • Репутация: +25428/-0
  • Сообщество PrestaShop
    • Просмотр профиля
1. Можно сделать 2 колонки по бокам 100% по высоте и залить их  синим цветом.
2. Вставлять картинку необходимого размера с сервера
background-image: url(image.php?width=ваша_ширина&height=ваша_высота);параметры подставляем js-скриптом.
3. Использовать background-size из CSS3. :)
html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
3. Подставлять фон для разных разрешений разного размера
.bg {
        min-height: 100%;
        min-width: 1024px;
 
        width: 100%;
        height: auto;
     
        position: fixed;
        top: 0;
        left: 0;
}
@media screen and (max-width: 1024px) {
        .bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}
07 Март 2013, 23:37:48
Ответ #2
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Ставлю 2 колонки по бокам экрана




Начинаю уменьшать ширину браузера - всё смещается справа налево. Мне нужно чтоб полосы были на фикс на расстоянии от основного контента.


07 Март 2013, 23:39:45
Ответ #3
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Полосы вставлял так
body {
   border-left:150px solid #60CEFD;
   border-right:150px solid #60CEFD;

   
      font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align: center
}
08 Март 2013, 00:13:43
Ответ #4
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86688
  • Репутация: +25428/-0
  • Сообщество PrestaShop
    • Просмотр профиля
border-left:150px solid #60CEFD;
border-right:150px solid #60CEFD;
На какое разрешение ?
Ширина центра фикс. 980px.
#page {
    margin: 0 auto 2px;
    text-align: left;
    width: 980px;
}
980+300=1280px (не считая полосы прокрутки + 20px)
Поэтому все смещается.
В таком случае можно добавить контейнер (div) с белым фоном, в нем будет основной контейнер (div#page), а для body
background-color: #60CEFD;
08 Март 2013, 00:17:59
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 885
  • Репутация: +206/-0
    • Просмотр профиля
Проще так сделать
body {
background-color: #60CEFD;

#page {
background-color: white;
08 Март 2013, 00:25:03
Ответ #6
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Посл спосбо хорош, только как сделать чтобы фон был на некотором расстоянии от основного контента, не хочу чтоб он вплотную прижимался. Спасибо.
08 Март 2013, 00:29:54
Ответ #7
  • Ветеран
  • *****
  • Сообщений: 885
  • Репутация: +206/-0
    • Просмотр профиля
Тогда еще один div
Цитировать
В таком случае можно добавить контейнер (div) с белым фоном, в нем будет основной контейнер (div#page), а для body
global.css
.wrap{
background-color: white;
margin: 0 2%;
}
header.tpl
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id="restricted-country">
<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
</div>
{/if}
<div class="wrap">
<div id="page">
footer.tpl
<!-- Footer -->
<div id="footer">{$HOOK_FOOTER}</div>
</div>
</div>
{/if}
</body>
</html>
08 Март 2013, 00:53:34
Ответ #8
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Ой что-то мой мозг совсем запутался)
Не думая сделал всё как в посл посте - всё залилось синим фоном, весь контент выстроился узким столбиком сверху вниз посередине экрана.


Такой вопрос. Вот скрин



По правой стороне есть расстояние между фоном и контенотом. Левый край вплотную. Не могу понять где задается это расстояние справа. МОжет можно выставить такое же слева и всё будет хорошо? :)
08 Март 2013, 11:01:04
Ответ #9
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 105673
  • Репутация: +39553/-0
    • Просмотр профиля
    • Webstudio UwK
В стандарной теме Prestashop расстояние слева и справа задается  в файле:
/themes/prestashop/css/global.css
/* global layout */
#page {
width: 980px;
margin: 0 auto 2px auto; /* центрировать блок с одинаковым расстоянием слева и справа  */
text-align: left
}
Цитата: Руслан Л
Тогда еще один div
.....
Можно и так сделать, если не меняли стандарную тему, то должно работать.
Не забудьте добавить
Цитата: Руслан Л
Проще так сделать
body {
background-color: #60CEFD;

#page {
background-color: white;
Cоздание интернет сайтов Webstudio UwK