Наложение картинки фона поверх шаблона

Discussion in 'Внешний вид, шаблоны, графика' started by annflower1, Nov 17, 2010.

  1. annflower1
    Offline

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

    Joined:
    Aug 28, 2010
    Messages:
    29
    Likes Received:
    0
    Gender:
    Female
    Всем привет, сдела новый шаблончик для сайта, да вот закралась проблемка с одной из картинок фона. Есть картинка topmenu2.png (нижние части рук, так как верхняя часть является шапкой шаблона) края у неё с фоном, а центр прозрачный (сделан специально, чтобы при наложении были видны статьи сайта.

    [​IMG]

    Так вот начала я её прописывать в .css

    когда прописываю как #top {

    Код (html):
    1. #top {
    2. margin:0 -354px;
    3.     background-position:center top;
    4.     background-color: transparent;
    5.     background-image:url(../images/topmenu2.png);
    6.     background-repeat:no-repeat;
    7.         padding:0;
    8.         width:1665px;
    9.         height: 290px;
    10. }


    получается ерунда, текст уезжает вниз
    [​IMG]

    когда прописываю как #bg_up {

    Код (html):
    1. #bg_up {
    2. margin:0 -354px;
    3.     background-position:center top;
    4.     background-color: transparent;
    5.     background-image:url(../images/topmenu2.png);
    6.     background-repeat:no-repeat;
    7.         padding:0;
    8.         width:1665px;
    9.         height: 290px;
    10. }


    то не вижу эту картинку на сайте вобще(
    [​IMG]

    А должен сайт http://guards.ordenos.ru/ выглядеть вот так, чтобы ручки были на месте и на уровне текста
    [​IMG]

    Подскажите, кто может помочь, что яд елаю не так, и что я должна написать в css, чтобы картинка корректно отображалась на сайте.
     
  2.  
  3. woojin
    Offline

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

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    попробуй сюда:
    добавь overflow: hidden;
    или поиграй с z-index'ами
     
  4. annflower1
    Offline

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

    Joined:
    Aug 28, 2010
    Messages:
    29
    Likes Received:
    0
    Gender:
    Female
    Код (html):
    1. #top {
    2. margin:0 -354px;
    3.     background-position:center top;
    4.     background-color: transparent;
    5.     background-image:url(../images/topmenu2.png);
    6.     background-repeat:no-repeat;
    7.         padding:0;
    8.         width:1665px;
    9.         height: 290px;
    10.         overflow: hidden;
    11. }


    прописала, но текст все-равно уехал вниз(

    а вот это не поняла, :[с чем поиграть и что там сделать то?

    или поиграй с z-index'ами
     
  5. woojin
    Offline

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

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    z-index - это положение элемента относительно других по оси Z, т.е. если рассматривать экран как лист бумаги то это будет положение данного листка относительно остальных ВЫШЕ(над) или НИЖЕ(под)

    ясно?
     
  6. annflower1
    Offline

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

    Joined:
    Aug 28, 2010
    Messages:
    29
    Likes Received:
    0
    Gender:
    Female
    о, это понятно да)) только где с ними играть то в css?
     
  7. annflower1
    Offline

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

    Joined:
    Aug 28, 2010
    Messages:
    29
    Likes Received:
    0
    Gender:
    Female
    Я так поняла мне надо текст теперь двигать вверх? ума не приложу где это делать
     
  8. woojin
    Offline

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

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    естественно в CSS
    всё в том же CSS

    ищи тег в который у тебя заключён твой текст, у этого тега есть или класс или ID и поле этого ищи в CSS соответствующий класс или ID и в нём добавляй margin-top: -(какое то число - опытным путём подберёшь)px; пример:
    Код (CODE):
    1. margin-top: -150px;

    будешь подбирать опытным путём если не умеешь пользоваться FB*
     

Share This Page

Loading...