How to make full screen background in a web page
How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?
10 Answers 10
its very simple use this css (replace image.jpg with your background image)
um why not just set an image to the bottom layer and forgo all the annoyances
Via jQuery plugins 😉
Use this CSS to make full screen backgound in a web page.
Use the following code in your CSS
Make a div 100% wide and 100% high. Then set a background image.
A quick search for keywords background generator shows this CSS3 produced background pattern that’s dynamically created.
By keeping the image small and repeatable, you won’t have problems with it loading on mobile devices and the small image file-size takes care of memory concerns.
Here’s the markup for the head section:
If your going to use an image of something that should preserve aspect ratio, such as people or objects, then you don’t want 100% for width and height since that will stretch the image out of proportion. Instead check out this quick tutorial that shows different methods for applying background images using CSS.
CSS Backgrounds — Фон
Свойства фона CSS используются для определения фоновых эффектов для элементов.
Свойства фона CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Цвет фона
Свойство background-color задает цвет фона элемента.
Цвет фона страницы задается так:
Пример
С помощью CSS цвет чаще всего задается:
- a valid color name — like "red"
- a HEX value — like "#ff0000"
- an RGB value — like "rgb(255,0,0)"
Посмотрите на значения цвета CSS для полного списка возможных значений цвета.
В приведенном ниже примере элементы <H1>, <p> и <div> имеют разные цвета фона:
Пример
div <
background-color: lightblue;
>
p <
background-color: yellow;
>
Фоновое изображение
Свойство background-image указывает изображение, используемое в качестве фона элемента.
По умолчанию изображение повторяется так, чтобы оно охватывало весь элемент.
Фоновое изображение для страницы можно задать так:
Пример
Ниже приведен пример плохого сочетания текста и фонового изображения. Текст вряд ли читается:
Пример
Примечание: При использовании фонового изображения используйте изображение, которое не нарушает текст.
Фоновое изображение-повторить горизонтально или вертикально
По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.
Некоторые изображения должны повторяться только по горизонтали или вертикали, или они будут выглядеть странно, как это:
Пример
Если изображение выше повторяется только горизонтально ( background-repeat: repeat-x; ), фон будет выглядеть лучше:
Пример
Совет: Чтобы повторить изображение вертикально, установите background-repeat: repeat-y;
Фоновое изображение-установить положение и не повторять
Отображение фонового изображения только один раз также задается свойством background-repeat :
Пример
В приведенном выше примере фоновое изображение отображается в том же месте, что и текст. Мы хотим изменить положение изображения, так что он не нарушает текст слишком много.
Положение изображения задается свойством background-position :
Пример
Фоновое изображение-фиксированное положение
Чтобы указать, что фоновое изображение должно быть исправлено (не будет прокручиваться вместе с остальной частью страницы), используйте свойство background-attachment :
Пример
Фон-Сокращенное свойство
Чтобы сократить код, можно также указать все свойства фона в одном свойстве. Это называется сокращенным свойством.
Сокращенное свойство для фона — background :
Пример
При использовании сокращенного свойства порядок значений свойств:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Это не имеет значения, если одно из значений свойства отсутствует, до тех пор, пока другие из них в этом порядке.
Как сделать в html фон для сайта — это нужно знать обязательно
В html фон для сайта не задают, это пишется через css-стили, но это лишь теоретическая формальность. А теперь давайте узнавать, как этот фон определять.
Фон для сайта или отдельного блока
Поскольку для осуществления этой цели нам нужен css-файл, его нужно создать и подключить к html. Об этом написано в этой статье. После этого можно приступать к работе. Во-первых, вам нужно определиться с тем, чему вы хотите задать фон. Если всей странице в целом, то сделать это можно так:
То есть мы обращаемся к тегу body , который представляет всю нашу страничку. Для задания цвета фона используется свойство background-color . Но что, если вам нужно задать в качестве фона рисунок, а не сплошной цвет? Тогда стоит написать так:
Для наглядности я предлагаю рассмотреть все подробнее на примере. Для этого я буду использовать такую картинку: 
Например, background-image: url(comp.png) . В этом примере мы задали фоновую картинку с именем comp (именно так я ее назвал) формата png, которая лежит в той же папке, что и css-файл.
В html создам произвольный блок с конкретными размерами, чтобы на нем демонстрировать работу css-свойств.
И вот для него стили:
Вот что у нас получилось:
Почему так? Дело в том, что по умолчанию браузер повторяет картинку столько раз, чтобы полностью заполнить блок. Иногда так и нужно, например, при использовании бесшовных орнаментов, но в нашем случае должна быть одна картинка. К счастью, этим можно очень легко управлять.
Повторение фона
Если у вас картинка в качестве фона, то по умолчанию она будет повторяться по горизонтали и вертикали, чтобы заполнить все пространство страницы. Чтобы это убрать, используется свойство background-repeat и его значение no-repeat (не повторять). Также есть такие значения:
- Repeat-x – повторять только по горизонтали
- Repeat-y – только по вертикали
Допишем в свойства нашему графическому фону:
Позиция
Свойство background-position определяет место, где будет находиться картинка. Здесь задается два значения – по горизонтали и вертикали. Примеры: background-position: right bottom – позиция в правом нижнем углу, top-left – в нижнем верхнем (и так по умолчанию), 250px 500px – смещение от левого верхнего угла вправо на 250 пикселей и вниз на 500.
Давайте лучше посмотрим на примерах:
Картинка переместиться в верхний правый край. Я дал блоку также желтый фон, чтобы были видны его края.
background-position: 50% 50%;
Изображение появилось ровно по центру в своем блоке. Да-да, такое тоже возможно благодаря процентной записи позиции.
background-position: 70% 20%;
Фон смещен на 70% по горизонтали, и на 20 по вертикали.
Разрешается также в пикселях задавать отрицательное значение позиции. Это допустимо делать, например, когда вы используете большую картинку-спрайт и нужно поставить в блок нужную часть этого спрайта.
Закрепление фона
Еще мне очень нравится одно свойство, которое называется background-attachment . У него есть всего два значения и первое стоит по умолчанию ( scroll ). Это означает, что при прокрутке страницы фон тоже будет прокручиваться, а если вы используете картинку без повторений, то в конце концов она закончиться и дальше пойдет просто сплошной цвет.
Чтобы этого не случилось, прописывается background-attachment: fixed и теперь наш фон надежно зафиксирован на месте. Это можно сравнить с тем, как блоку определить фиксированное позиционирование и он не будет исчезать со страницы при ее прокрутке.
Сокращенная запись всего этого добра
Мы с вами разобрали много свойств, которые позволяют сделать фон, но если их все применять, то получается громоздкая запись. Есть очень элегантное решение. Свойство background позволяет через пробел записать нужные настройки в таком порядке:
Background: цвет изображение повторение закрепление позиция;
И теперь все можно записать так:
Если какое-то свойство определять не нужно, то оно просто опускается (в нашем случае мы не записали background-attachment).
Много фонов
А что делать, если вам нужно несколько фоновых картинок? Бывает, что ж поделать. Сегодня css поддерживает такую возможность. Давайте и мы попробуем. Возьмем такую иконку 
Я назвал ее laptop.
И вот код для вставки мультифона:
Как видите, достаточно всего лишь поставить запятую после первого изображения и прописать настройки для второго. Сплошной цвет в этом случае лучше задать отдельно.
Таким же образом можно записать еще сколько угодно картинок, но не переусердствуйте – слишком много графики это не очень хорошо.
Вот на этом мне бы хотелось закончить эту статью. С фоном можно делать еще много других интересных вещей, о них постараюсь писать в будущем (а кое-что уже написал – например, здесь). Успешного вам изучения этого свойства.
Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.
Как поставить картинку на сайт html на фон страницы
Фон элемента описывается в CSS свойством background . Фактически это свойство представляет сокращение набора следующих свойств CSS:
background-color : устанавливает цвет фона
background-image : в качестве фона устанавливается изображение
Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png .
Также можно использовать абсолютные адреса URL, например:
Либо можно использовать относительные адреса — относительно html-документа или корневого каталога сайта:
background-repeat : устанавливает режим повторения фонового изображения по всей поверхности элемента
background-size : устанавливает размер фонового изображения
background-position : указывает позицию фонового изображения
background-attachment : устанавливает стиль прикрепления фонового изображения к элементу
background-clip : определяет область, которая вырезается из изображения и используется в качестве фона
background-origin : устанавливает начальную позицию фонового изображения
Первый блок окрашен в оттенок красного цвета, а второй блок устанавливает в качестве фона изображение. Все содержимое блока накладывается поверх фона:
Повторение изображения
На выше приведенном скриншоте видно, что CSS должным образом масштабирует изображение, чтобы наиболее оптимально вписать его в пространство элемента. Однако в связи с масшатбированием изображение может не полностью покрывать поверхность элемента, и поэтому для полного покрытия автоматически CSS начинает повторять изображение.
С помощью свойства background-repeat можно изменить механизм повторения. Оно может принимать следующие значения:
repeat-x : повторение по горизонтали
repeat-y : повторение по вертикали
repeat : повторение по обеим сторонам (действие по умолчанию)
space : изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов
round : изображение должным образом масштабируется для полного заполнения всего пространства
no-repeat : изображение не повторяется
Размер изображения
Свойство background-size позволяет установить размер фонового изображения. Для установки размера можно использовать либо единицы измерения, например, пиксели, либо проценты, либо одно из предустановленных значений:
contain : масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение
cover : масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение
auto : значение по умолчанию, изображение отображается в полный размер
Если нужно масштабировать изображение таким образом, чтобы оно оптимальнее было вписано в фон, то для обеих настроек можно установить значение 100%:
Если задаются точные размеры, то вначале указывается ширина, а потом высота изображения:
Можно задать точное значение для одного измерения — ширины или высоты, а для другого задать автоматические размеры, чтобы браузер сам выводил точные значения:
Во втором случае изображение будет масштабироваться до размеров 140х110. Поскольку у нас еще остается место на элементе, то по умолчанию изображение будет повторяться для заполнения всей поверхности:
Позиция изображения
Свойство background-position управляет позицией фонового изображения внутри элемента. Оно может принимать отступы от верхнего левого угла элемента в единицах измерения, например, в пикселях в следующем формате:
Кроме того, данное свойство может принимать одно из следующих значений:
top : выравнивание по верхнему краю элемента
left : выравнивание по левому краю элемента
right : выравнивание по правому краю элемента
bottom : выравнивание по нижнему краю элемента
center : изображение располагается по центру элемента
Здесь изображение выравнивается по верху и правому краю, то есть будет располагаться в правом верхнем углу элемента.
background-attachment
Свойство background-attachment управляет, как фоновое изображение будет прикреплено к элементу. Это свойство может принимать следующие значения:
fixed : фон элемента фиксирован вне зависимости от прокрутки внутри элемента
local : по мере прокрутки внутри элемента фон изменяется
scroll : фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой фон, тогда как при fixed создается один фон для всех элементов
background-origin
Свойство background-origin указывает позицию на изображении, с которой будет начинаться собственно фоновое изображение для элемента. Оно может принимать следующие значения:
border-box : фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border
padding-box : фон устанавливается с учетом внутренних отступов
content-box : фон устанавливается по содержимому элемента
Используем все три значения:
background-clip
Свойство background-clip определяет, какая часть изображения используется для фона. Он принимает те же значения:
border-box : изображение обрезается по границам элемента
padding-box : из изображения исключается та часть, которая находится под границами элемента
content-box : изображение обрезается по содержимому с учетом внутренних отступов
Например, если к предыдущей разметке мы применим следующие стили:
Тогда мы получим следующий результат:
Свойство background
Свойство background по сути является сокращением всех ранее рассмотренных свойств CSS в формате: