Вернуться   SEO форум - оптимизация и продвижение сайтов > Web разработки > Дизайн и верстка

Важная информация
Дизайн и верстка - Верстка: блочная, div, HTML... Дизайн, внешний вид сайта.

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 08.10.2010, 10:46   #1
 
Аватар для BloodBlade3000
 
Сообщений: 17
FR (активность): 1,238

Доп. информация
По умолчанию Автор темы Как растянуть задний фон сайта?

Нужно растянуть задний фон сайта по ширине и высоте экрана. В CSS пробовал указать бекграунд, плюс задал ему ширину и высоту 100%. Но вместо того чтобы растянуться на весь экран, картинка просто замостилась. Подскажите, как реализовать мою задумку?
BloodBlade3000 вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 08.10.2010, 11:04   #2
 
Аватар для Che
 
Сообщений: 425
FR (активность): 14,195

Доп. информация
По умолчанию Re: Как растянуть задний фон сайта?

Цитата:
Сообщение от BloodBlade3000 Посмотреть сообщение
Нужно растянуть задний фон сайта по ширине и высоте экрана. В CSS пробовал указать бекграунд, плюс задал ему ширину и высоту 100%. Но вместо того чтобы растянуться на весь экран, картинка просто замостилась. Подскажите, как реализовать мою задумку?
Фоновый рисунок никак не получится растянуть. Есть такая хитрость - использовать слои. В нижнем слое - картинка, которую будете растягивать. В верхнем - все остальное содержимое. Порядок слоев определяется через атрибут z-index (чем больше значение, тем выше относительно других слоев)

Код:
<html>
 <head>
  <title>Фоновая картинка</title>
  <style type="text/css">
   #layer1 {
    z-index: 1; /* Порядок слоев */
    width: 100%; /* Ширина слоя с фоном */
    height: 100%; /* Высота слоя с фоном */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края окна */
    top: 0; /* Положение от верхнего края */
   }
   #layer2 {
    position: absolute; /* Абсолютное позиционирование */
    z-index: 2; /* Порядок слоев */
   }
  </style>
 </head>
 <body>
  <div id="layer1"><img src="name_your_image.gif" width="100%" alt=""> </div>
  <div id="layer2">Текст</div>
 </body>
</html>
Но при увеличении размера окна браузера изображение, которая находится в виде фона также начнет расширяться. Резко ухудшится качество изображения.


Видео-курс "Основы поисковой оптимизации"
Аудит и консультации по внутренней оптимизации Вашего сайта.
Che вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
Umka (09.10.2010)
Старый 09.10.2010, 08:29   #3
 
Аватар для Umka
 
Сообщений: 4,143
FR (активность): 80,659

Доп. информация
По умолчанию Re: Как растянуть задний фон сайта?

Цитата:
Сообщение от BloodBlade3000 Посмотреть сообщение
Но вместо того чтобы растянуться на весь экран, картинка просто замостилась.
Тоже, кстати вариант: замостить бесшовной текстурой...
Umka вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Ответ

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции
Внимание!
Этой теме более 4374 дней. Вы можете оставить сообщение здесь. Но, обращаем внимание. Возможно, рациональней создать новую тему (найти свежее обсуждение)?


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Тематика сайта. Как поисковики определяют тематику сайта? SEWalker Раскрутка в общих чертах 5 30.09.2011 21:17
Индексация сайта. Учитывается только Главная страница сайта, или все страницы? AntonV Индексация сайта 3 04.04.2010 03:56
Онлайн анализ сайта бесплатно: seo оптимизация продвижение сайта, раскрутка сайта Kit-Jobs Ru SEO сервисы 0 27.09.2009 17:40
Анализ сайта онлайн - seo оптимизация продвижение сайта Kit-Jobs Ru SEO сервисы 1 11.08.2009 08:03

Текущее время: 20:53. Часовой пояс GMT +3.