Фон сайта как ссылка.

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем halfhope, 18 ноя 2013.

  1. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Как сделать фон сайта ссылкой? Т.е. допмустим контейнер сайта выровнен по центру, размер 980px; По бокам остается расстояние и виден фон тега body.
    Можно ли сделать его ссылкой? Пытался сделать псевдо фон, который будет :
    HTML:
    <div style="display:block;top:0px;left:0px;width:100%;height:100%;position:fixed;z-index:2;cursor:pointer;" onClick="alert('ass');"></div>
    А у контейнера z-index:5; Но на контейнере все равно местами есть пробелы, но которых cursor:pointer и при клике происходит alert. Как избавиться от этого?
    UPD#1
    Пробовал поставить z-index:-1; у блочного элемента, тот же результат.
     
    Последнее редактирование: 18 ноя 2013
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
    не сложно. Боди не нужен. Уже в боди делаешь один контейнер и в него вкладываешь контент и еще один с бэкраундем:
    HTML:
    <div class="div1">
    <div class="div2">
        <div>блок с бэкграундем</div>
    <div>
    <div>блок со всем остальным контентом</div>
    </div>
    и в css вбиваешь что-то типо:
    HTML:
    .div2 {
        background: url("/branding/fon.jpg") no-repeat scroll center top #000;
        height: 100%;
        margin: 0 auto;
        min-width: 999px;
        padding: 0;
        width: 100%;
    }
    p.s. Это не стопроцентно рабочая вёрстка - это только пример реализации. возможно нужно подпилить.
     
    halfhope нравится это.
  3. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    У меня все равно не получилось, пытался по резному сделать, фон контейнера все равно "просвечивает"( В инете много инфы на эту тему, но почему-то на дефолтном шаблоне opencart все варианты не работают. Возможно, что я не понимаю механизм работы, но тут вроде ничего сложного нет. Прошу помощи.
     
    HPlus нравится это.
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.038
    Симпатии:
    774
    Покажите что получилось и я подправлю.
     
    halfhope нравится это.
  5. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Адрес http://oc.halfhope.ru/
    Обернул контейнер во враппер и добавил два дива первый ссылка, второй фон.
    Вот так:
    HTML:
    <div id="wrapper">
        <div style="cursor:pointer;" onClick="alert('ass');">
            <div style="background:url('image/data/background_manager/background/881.png');position:fixed;top:0px;left:0px;width:100%;height:100%;"></div>
        </div>
        <div id="container">Контент</div>
    </div>
    
    --- Добавлено, 19 ноя 2013 ---
    Dotrox, спасибо за помощь, получилось!!!
    Как оказалось это было самое простое решение, которое я по каким-то причинам отверг. (Руки кривые)
    Код:
    <body>
        <a href="http://example.com" id="bglink">jump to example.com</a>
        <div id="container">...</div>
    </body>
    
    Стили:
    Код:
    <style>
      #bglink{
        display:block;
        height:100%;
        width:100%;
        position:fixed;
        left:0;
        top:0;
        z-index:0;
        text-indent:-5000em;
      }
      #container{
        position:relative;
        z-index:10;
      }
    </style>
    
    Все прекрасно работает, решение нашел на http://wordpress.org/support/topic/can-you-make-a-body-background-image-clickable.
    Вс
    ем большое спасибо!
     
    Последнее редактирование: 19 ноя 2013
    HPlus нравится это.
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.038
    Симпатии:
    774
    halfhope нравится это.
  7. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Нет, сейчас исправлю, спасибо.
     
    HPlus нравится это.
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.038
    Симпатии:
    774
    Советую фон на сайте сделать фиксированным, а то при прокрутке в глазах рябит.
    И прокрутку наверх нужно сделать заметней. Текст там не видно почти и непонятно, что это такое.
     
  9. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Спасибо, действительно, нужно добавить возможность делать фон фиксированным. А пока что фиксация фона работает только для боковых изображений в шаблоне "Два боковых изображения + контейнер".
     
    Последнее редактирование: 22 ноя 2013
    HPlus нравится это.
  10. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.038
    Симпатии:
    774
    Это сделать очень просто: поставьте этот фон не на body (хотя там можно оставить), а на ссылку .bg_mgr_link.
    А вообще принцип такой: нужно под контент подложить блок с шириной и высотой в 100% и position: fixed - его фон и станет фиксированным фоном страницы. В вашем случае таким блоком уже является ссылка.
     
    halfhope нравится это.