28-12-2018 08:02

Как сделать резиновый фон

Содержание статьи:

Когда вы создаете собственный сайт, естественно, вы хотите, чтобы он отображался как можно более привлекательно независимо от версии браузера пользователя. В частности, чтобы фоновое изображение растягивалось и подстраивалось под разрешение монитора компьютера. Как сделать резиновый фон

Вам понадобится

  • - навыки работы с html, css, java-script.

Инструкция

Как выложить файл на свой сайтВам будет интересно:Как выложить файл на свой сайт

Откройте код своего сайта в любом редакторе, например, программе «Блокнот» либо специальной программе для веб-дизайна, Dreamweaver. Вставьте в код следующие строки, чтобы растянуть фон сайта. Пропишите Background: url (‘ «Вставьте ссылку на изображение»’).

Для того чтобы размер картинки подгонялся по горизонтали, используйте следующий код: Background: url (‘ «Вставьте ссылку на изображение»’ repeat-x), по вертикали – в конце кода х замените на у. Если стиль сайта прописан в файле css, вставьте код в него. Таким образом, вы сможете поставить резиновый фон на ваш сайт.

Воспользуйтесь следующим примером кода, который помещает фоновый рисунок на страницу и позволяет автоматически растянуть его, подстраиваясь под разрешение того монитора, на котором происходит просмотр страницы. Пример кода: body {background: «Вставьте ссылку на фоновое изображение» () no-repeat fixed left center; затем background-size: [...].

Используйте для растягивания фонового изображения простую вставку картинки в качестве фоновой и установите для нее ширину 100%. К примеру, вставьте в код страницы следующий текст: фоновое изображение» alt= «Введите название картинки» width="100%" / >. Таким образом, будет использоваться подгон ширины картинки, но ее пропорции будут нарушены.

Аналогично можно установить растягивание рисунка по высоте, вместо атрибута width используйте height. Либо воспользуйтесь следующим примером кода для css: фоновое изображение сайта)" > и после него добавьте 100% ширину изображения, как в предыдущем примере. Также вы можете с помощью скрипта узнать разрешение экрана пользователя и отредактировать под него размеры вашей таблицы.

Видео по теме

Источник