Как сделать background?

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by Award86, Sep 30, 2010.

  1. Offline

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

    Joined:
    Sep 27, 2010
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    В шаблоне имеется такой класс

    div.inset{background:transparent url(../images/style2/inset_bg1.png) repeat-y right top!important;}

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

    вопрос: как прописать ссылку на другой рисунок в этом же классе не создавая новый.
     
  2.  
  3. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    это и есть твой адрес рисунка
     
  4. Offline

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

    Joined:
    Sep 27, 2010
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    да, это понятно.
    а как еще один рисунок прописать в этом же классе?

    это возможно?

    новый класс эсли создам нужно его во всех пхп шаблона прописать.....а там ногу можно сломать(
     
  5. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    два рисунка в один один класс вставить никак нельзя
     
  6. DKraev
    Offline

    DKraev <i>(aka gft)</i> => Cпециалист <=

    Joined:
    Aug 16, 2008
    Messages:
    1,627
    Likes Received:
    219
    Gender:
    Male
    Вы про что??? index.php шаблона один и именно в нем нужно прописывать новый класс. Один раз...
     
  7. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    хренова что все ясновидящие сейчас уволены и ведётся набор новых - но я так понимаю что надо чтобы было просто одновременно два рисунка в BG

    но человек видимо не может выразить всё словами и передаёт свои мысли, а у меня блин приёмник в ремонте!!!
     
  8. Offline

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

    Joined:
    Sep 27, 2010
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    а по-моему, я все ясно написал. ладно, попытка №2:
    есть шаблон, внутри модуль.
    нашел в template.css класс который отвечает за бекграунд этого модуля.
    изменил его(прописал рисунок бекграунда) -div.inset{background:transparent url(../images/style2/inset_bg1.png) repeat-y right top!important;}
    появилась полоска по правому краю модуля.
    захотел сделать идентичное слева.
    вопрос: если без создания нового класса не обойтись, как его прописать в шаблоне?

    потому что класс бекграунда для этого модуля уже существует (который задает "левый рисунок")
    когда ввожу новый класс, тогда пропадает "левый рисунок" появляеться "правый".
     
    Last edited: Oct 6, 2010
  9. DKraev
    Offline

    DKraev <i>(aka gft)</i> => Cпециалист <=

    Joined:
    Aug 16, 2008
    Messages:
    1,627
    Likes Received:
    219
    Gender:
    Male
    А что мешает для класса левого модуля прописать нужный background?

    Покажите сайт, ну или скрин, чтобы было более понятно.
     
  10. Offline

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

    Joined:
    Sep 27, 2010
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    вот, то что на белом фоне - модуль inset
    в выделеное красным - это бекграунд этого модуля шириной в несколько пикселей.
     

    Attached Files:

  11. DKraev
    Offline

    DKraev <i>(aka gft)</i> => Cпециалист <=

    Joined:
    Aug 16, 2008
    Messages:
    1,627
    Likes Received:
    219
    Gender:
    Male
    А, понял. Контент шаблона заключен в див с классом inset, т.е примерно это выглядит так:
    Код (CODE):
    1. <div class="inset">Контент сайта</div>


    Вам нужно добавить еще один див, которому назначить новый класс, а для класса в CSS прописать фоновое изображение. Ну примерно так:
    Код (CODE):
    1. <div class="inset_left"><div class="inset">Контент сайта</div></div>


    И для inset_left прописать свои стили.

    UPD:

    Или, как вариант, сделать немного по другому. У Вас же фиксированный шаблон? Посмотрите какова ширина области контента. Затем в фотошопе создайте новое изображение этой ширины. Справа - тень и слева тень, между ними - фон. И уже это изображение назначьте для .inset
    Код (CODE):
    1. div.inset{background:transparent url(../images/style2/inset_bg1.png) repeat-y center top!important;}
     
    Award86 likes this.
  12. Offline

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

    Joined:
    Sep 27, 2010
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    <div class="inset_left"><div class="inset">Контент сайта</div></div>

    наконец-то!
    думаю так должно получиться. спасибо за подсказку!

    сперва думал что в одном диве два рисунка можно задать =)
    а меня не поняли)

    а насчет последнего варианта - пробовал, но мне не подошло т.к. ширина модуля меняеться
     
  13. Offline

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

    Joined:
    Jul 29, 2009
    Messages:
    34
    Likes Received:
    2
    Gender:
    Male
    В CSS3 можно добавлять более одного фона.

    Приблизительно так:
    Код (CODE):
    1. background:
    2.      url(images/background1.png) top left repeat-x,
    3.      url(images/background2.png) top right repeat-x;


    Но в IE до 9-й версии не работает.
     

Share This Page

Loading...