27/10/2018

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

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

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

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

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

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

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

1.

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

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

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

А.

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

<body>

На такой:

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

Где

http://axmara.narod.ru/_page/primer/zadniy_fon_kartinka.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 для заднего фона, создадим отдельный файл стилей 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/_page/primer/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/_page/primer/zadniy_fon_kartinka.css" type="text/css">
</head>
<body>
</body>
</html>

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

http://axmara.narod.ru/_page/primer/zadniy_fon_kartinka.css

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

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

Написать что-нибудь...