Отображение текста на фоне

Тема в разделе "Верстка", создана пользователем punkz, 4 окт 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. punkz

    punkz Постоялец

    Регистр.:
    4 июл 2006
    Сообщения:
    66
    Симпатии:
    21
    Есть вот код


    HTML:
    
           
            * { margin: 0; padding: 0; }
       
            #bg { position: fixed; top: 0; left: 0; }
            .bgwidth { width: 100%; }
            .bgheight { height: 100%; }
           
     
    #content {font-family: Cuprum; width: 800px; margin: 10% 20% 0; color: #123456; font-size: 72px; text-align: center;}
    a {font-weight: bold;
    color: #fff;}       
           
            </style>
       
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
     
        <script>
            $(function() { 
           
                var theWindow        = $(window),
                    $bg              = $("#bg"),
                    aspectRatio      = $bg.width() / $bg.height();
                                           
                function resizeBg() {
                   
                    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                        $bg
                            .removeClass()
                            .addClass('bgheight');
                    } else {
                        $bg
                            .removeClass()
                            .addClass('bgwidth');
                    }
                               
                }
                                             
                theWindow.resize(function() {
                    resizeBg();
                }).trigger("resize");
           
            });
        </script>
    <img src="5.jpg" id="bg" alt="">
    <div id="content">
    да и зачем так дальше?!
    <div/>

    Оно берёт картинку и ресайзит её под разрешение автоматом, но как сделать чтобы картинка была именно фоном?
     
  2. fidelics

    fidelics Писатель

    Регистр.:
    21 сен 2012
    Сообщения:
    6
    Симпатии:
    1
    CSS3 поддерживает свойство background-size. Только при его использовании можно добиться того, чтоб картинка была именно фоном (а не элементом img) и при этом динамически меняла размер.
     
  3. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.405
    Симпатии:
    1.185
  4. fidelics

    fidelics Писатель

    Регистр.:
    21 сен 2012
    Сообщения:
    6
    Симпатии:
    1
    В этом случае масштабируемая картинка никак не будет фоном.
    Всего-то нижним слоем.