SEO форум SEO форум
Форум о создании, продвижении и оптимизации сайтов, рекламе, хостинге, растровой и векторной графики, программировании, о компьютерах и android устройствах Главная станица Главная страница сайта   Бесплатная доска объявлений Бесплатная доска объявлений   Поиск Поиск   Участники Участники

Узнайте еще больше о возможностях Paint.net в нашей группе в VK "Уроки по paint.net"
Сегодня: 22.12.2024 - 04:58:05
Страницы:  1  
SEO форум » Уроки по CSS » Резиновый фон у сайта с помощью CSS
АвторСообщение

ADMIN

участник форума





Статистика:
Тем создано: 103
Сообщений: 2235
Репутация: 9727 ±
Нарушения: 0
Сделать резиновый слой у сайта достаточно просто используя только CSS.А главное это может сделать навичек который только познает азы сайтостраительства.
Для начала создаем папку "images" и кладем в нее наш фон. Можно и без папки и положить в другую папку где у вас лежат изображения, но для этого надо будет не забыть поменять путь в коде до вашего фона.

Название фону дал big. Изображение взял с небольшим разрешением (800х500 точек), что бы показать что маштабироваться оно будет прекрасно.Но экономия экономией, а для реального сайта советую брать изображение размером побольше.



Теперь переходим к коду CSS. Код достаточно простой и легко настраиваемый под себя. Даже человек ничего не понимающий в CSS может наугад изменять цифры подбирая нужные себе значения.


    Код:
    <style>

    img.big {
    /* Устанавливаем правила для фона */
    min-height: 100%;
    min-width: 850px;

    /* Маштаб изображения */
    width: 100%;
    height: auto;

    /* Позиции фона */
    position: fixed;
    top: 0;
    left: 0;
    }

    @media screen and (max-width: 850px){
    img.bg {
    left: 49%;
    margin-left: -511px; }
    }

    #page-wrap { position: relative; width: 800px; margin: 45px auto; padding: 15px; background: white; -moz-box-shadow: 0 0 15px black; -webkit-box-shadow: 0 0 15px black; box-shadow: 0 0 15px black; }
    p { font: 10px/2 Arial, times new roman; margin: 0 0 25px 0; text-indent: 35px; }
    </style>


Вставляем его между тегами head. При желании можно вывести этот код в отдельный файл стилей. Тут уж кому как удобнее.

Теперь сразу после тега body вставляем.

    Код:

    <img src="images/big.jpg" class="big">

    <div id="page-wrap">
    Теперь идет ваше содержимое. После которого не забываем закрыть тег div
    </div>

Все, резиновый фон готов. На создание которого было потрачено около двух минут.
Результат можно посмотреть тут http://good-surf.ru/forum/urok/css/fon/fon.html.
Сообщение # 1 25.03.14 - 20:38:43

Дмитрий



гость
Люди добрые, прошу помощи!
Нашел один сайт, на нем установлен фон, который движется за мышкой, выглядит очень круто!!
Хочу сделать себе такой же.
Вот пример http://nutday.ru/
Пожалуйста подскажите как это можно сделать на игровом портале, и что вообще нужно для этого?
Заранее благодарю всех за ответ!
Сообщение # 2 17.03.16 - 15:45:28

Алексанр



гость
Теперь идет ваше содержимое. После которого не забываем закрыть тег div . что значит ваше соержимое?
Сообщение # 3 21.09.16 - 13:41:56

ADMIN

участник форума





Статистика:
Тем создано: 103
Сообщений: 2235
Репутация: 9727 ±
Нарушения: 0
Алексанр, То что будет отображаться (текст, фото, видео и т.д.)
Сообщение # 4 21.09.16 - 14:57:35
SEO форум » Уроки по CSS » Резиновый фон у сайта с помощью CSS
Подпись изображения с помощью CSS :Предыдущая темаСледующая тема: Меняем курсор мыши на сайте с помощью CSS
Страницы:  1  

Сообщение
Имя E-mail
Сообщение

Нажмите на точку возле имени, чтобы вставить обращение к участнику в сообщение

Смайлы:
Ещё смайлы
         
Защитный код: (введите цифры, которые на синем фоне)
Ответ на вопрос: (Какой сейчас год?)
     

Powered by good-surf.ru
Спасибо за поддержку форума.