Адаптирование шапки сайта

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем derenikp, 25.01.2018.

  1. derenikp
    Offline

    derenikp Недавно здесь

    Регистрация:
    13.01.2017
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    Здравствуйте, имеется сайт buggai.ru на joomla 2.5, пытаюсь изменить фон в шапке, но сделав это так что бы на мониторах с любым диаметром шапка выглядела одинаково (сейчас на всех мониторах по разному ) проще говоря нужно чтобы шапка подстраивалась под размер монитора, надеюсь смог объяснить, ниже код шапки.

    .header_box {
    background: url("../images/blue.jpg") repeat-x center top #ffffff;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: 0 0 5px rgba(17, 17, 17, 0.32);
    overflow: hidden;
    padding:150px 0px 115px ;
    }
     
  2.  
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    Я применяю разные правила max-width:100%, обязательно width:100% , box:size:cover, etc
     
  4. derenikp
    Offline

    derenikp Недавно здесь

    Регистрация:
    13.01.2017
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    Попробовал применить, ничего не изменилось, может кто нибудь за определенную плату согласиться сделать ?
     
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    1200 руб ? или в пользу форума и статус получишь Тарифный план: Спонсор 300 руб. за 1 месяц
    Ссылку на сайт напиши. А обязательно фоновая картинка, попробуй прописать в коде ссылку на картинку и указать ширину и высоту.
     
  6. Offline

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

    Регистрация:
    09.09.2011
    Сообщения:
    324
    Симпатии:
    4
    Пол:
    Мужской
    Можно и так:
    Код (css):
    1. body.site{border-top:0px solid #000000;padding:20px;box-shadow: 0px 0px 0px #FFFFFF;
    2. background: url("/images/2.png") no-repeat;
    3.     -moz-background-size: 100%;
    4.     -webkit-background-size: 100%;
    5.     -o-background-size: 100%;
    6.     background-size: 100%;  
    7.     }

    И для мобилы другую картинку сделать (если надо), текст крупнее. Чтоб было видно что написано. И отрегулировать для разных разрешений типа
    Код (css):
    1. @media (min-width: 200px) and (max-width: 600px) {body.site{background: url("/images/2_1.png") no-repeat;
    2.     -moz-background-size: 100%;
    3.     -webkit-background-size: 100%;
    4.     -o-background-size: 100%;
    5.     background-size: 100%;  
    6.     }}
     

Поделиться этой страницей

Загрузка...