Как поставить картинку на задний фон страницы?

Как сделать картинку фоном в html, код, примеры, background, image.

Прежде чем ставить картинку на задний фон, то нужно учитывать, что в зависимости от разрешения картинки, задний фон будет на весь экран, либо будет занимать всего лишь часть!

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

1.Вставить код в саму страницу.

2.Использовать css.

Для того, чтобы это увидеть, как это будет выглядеть, будем создавать новую страницу для каждого варианта.

Коды копируем отсюда. Почему оставлены ссылки на мой сайт – читать обязательно!!?

1.

Как поставить картинку на задний фон страницы?

Пропишем в самой странице код заднего фона.

Опять же, для этого есть несколько вариантов решения:

А.

Изменим  код на странице:

<body>

На такой:

<body background="http://axmara.narod.ru/1_foto/primer-oboev.jpg">

Где

http://axmara.narod.ru/1_foto/primer-oboev.jpg – путь до моей картинки.

Код страницы будет такой:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body background="http://axmara.narod.ru/1_foto/primer-oboev.jpg">
</body>
</html>

Пример.

Б.

С использованием стилей css, но все равно в самой странице.

После титлов вставляем такой код:

<style type="text/css">

<!--

/* CSS Document */

body{

background-image:url(http://axmara.narod.ru/1_foto/primer-oboev.jpg)

}

-->

</style>

Код страницы будет такой:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style type="text/css">
<!--
/* CSS Document */
body{
background-image:url(http://axmara.narod.ru/1_foto/primer-oboev.jpg)
}
-->
</style>
</head>
<body>
</body>
</html>

Пример.

Как поставить на задний фон картинку с помощью css.

Здесь имеется ввиду css = отдельный файл css.

2.

Для этого нам потребуется:

А.Создать  файл стилей css .

Б.Прописать код с задним фоном а файле стилей.

В.Прикрепить  файл стилей css к нашей странице.

А.

Для использования css для заднего фона, создадим отдельный файл стилей css, назовём его  

Zadniy-fon-kartinka.css

Смотрим на него.

Б.

В самом файле стилей css, делаем такую надпись:

body{ background-image: url(http://axmara.narod.ru/1_foto/background/primer-background.jpg);

В.

Прикрепим его к странице, написав такой текст ниже титлов:

<link rel="stylesheet" href="http://axmara.narod.ru/site/background/Zadniy-fon-kartinka.css" type="text/css">

Код страницы будет такой:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Название страницы</title>

<link rel="stylesheet" href="http://axmara.narod.ru/site/background/Zadniy-fon-kartinka.css" type="text/css">

</head>

<body>

</body>

</html>

Путь до файла -

http://axmara.narod.ru/site/background/Zadniy-fon-kartinka.css

Смотрим, что у нас получилось.

Не нажали на рекламное объявление!?

Ничего страшного!

Вы ещё можете помочь проекту!

Да не оскудеет рука дающего!

Друзья! Мы тратим время + деньги и работаем для Вас, чтобы Вы смогли получить информацию!

Если у Вас есть время, чтобы оценить нашу работу, оставить сообщение в комментариях, поделиться ссылкой в соцсетях - это будет очень великодушно с Вашей стороны!

И мы будем Вам очень признательны за такие действия!

Заранее спасибо!

Комментарий через Vk.

Комментарий через Disqus, Facebook, Twitter, Google.

А теперь самое время развлечься!

Улучши поведенческий фактор на своём сайте!

Если понравится игра, то можно забрать код для своего сайта отсюда!

Индекс цитирования