Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Картинка на заднем фоне сайта страницы код css html пример

Поддержи проект!!! smile

Как поставить на задний фон картинку через css в коде html!? Мы хотим поставить на задний фон сайта какую-то картинку, скриншот, фото! Для этого нам понадобится как минимум одна картинка и код css html , который сможет поставить эту картинку на задний фон сайта. И естественно, что нам потребуется живой пример, как это сделать через код css !

Установка картинки на задний фон сайта пошаговая инструкция:

  1. Картинка, фото для заднего фона
  2. Как сделать картинку задним фоном сайта
  3. Код готовой страницы с задним фоном
  4. Пример страницы с установленным задним фоном
  5. Установка картинки на задний фон before или after + пример
  6. Отключить повторение заднего фона
  7. Как растянуть задний фон на весь экран/a>
  8. Скачать можно здесь
  1. Картинка, фото для заднего фона

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

    И поместим данный задний фон прямо сюда:

    Картинка, фото для заднего фона

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

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Картинка задний фон сайта страницы

  2. Как сделать картинку задним фоном сайта

    Чтобы установить картинку, фото на задний сайта, страницы, нам понадобится подопытный кролик, каждый раз теряются примеры, поэтому сделаем пример именно для этой темы!

    1.) Картинка у нас есть
    2.) Каркас простой страницы.
    3.) Теперь нам нужны стили для установки данной картинки нам на страницу:
    overflow: hidden; - применяем если не требуется прокрутка:

    body {

    background: url(https://dwweb.ru/путь../back.png)no-repeat center center fixed;

    background-size: cover;

    overflow: hidden;

    }

  3. Код готовой страницы с задним фоном

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

    <!DOCTYPE html>

    <html lang="ru">

    <head>

    <meta charset="UTF-8">

    <title> Пример простой страницы с задним фоном</title>

    <style>

    body {

    background: url(back.png)no-repeat center center fixed;

    background-size: cover;

    /* overflow: hidden; */

    }

    center {

    background: white;

    padding: 10px;

    opacity: 0.8;

    }

    </style>

    </head>

    <body>

    <center>Пример простой страницы - для того, чтобы посмотреть код, нажмите ctrl + U</center>

    <br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </body>

    </html>

  4. Пример страницы с установленным задним фоном

    Данный код страницы с задним фоном разместим у нас в примерочной, и вот вам ссылка, что у вас должно получиться.

  5. Установка заднего фона через псевдокласс before или after

    В принципе, для установки заднего фона через псевдокласс... будем делать все тоже самое, единственное добавим псевдо класс before! Второй пример заднего фона на странице сделать вообще легко потому, что он у нас уже есть и мы его используем здесь - > подписаться

    body::before {

    content: "";

    position: fixed;

    left: -50px;

    right: -50px;

    background: url(https://путь....png)center/cover no-repeat;

    height: 100%;

    }

    И весь код страницы пример 2 заднего фона на странице

    <!DOCTYPE html><html lang="ru"><head>

    <meta charset="UTF-8">

    <title>Подписаться </title>

    <style type="text/css">

    body::before {

    content: "";

    position: fixed;

    left: -50px;

    right: -50px;

    background: url(https://dwweb.ru/__img/__img_rotane/dwweb.ru.png)center/cover no-repeat;

    height: 100%;

    }

    html,body {

    margin: 0px;

    }

    center {

    margin: 0px;

    padding: 0px;

    position: absolute;

    display: inline-grid;

    top: 50%;

    left: 50%;

    width: 320px;

    border: 1px solid #cecece;

    padding: 50px 50px 49px 50px;

    transform: translate(-50%,-50%);

    BACKGROUND: #f3f3f3d1;

    font-size: 16px;

    font-family: monospace;

    }

    center input[type="checkbox"] {

    text-align: left;

    width: 15px;

    }

    .autoris input[type="submit"] { width: 235px;margin-top: 10px;} .autoris input { width: 212px; padding: 10px; margin-bottom: 4px; border: 1px solid #b4b4b4;}

    </style>

    </head>

    <body>

    <center>

    <h3>Подписаться</h3>

    <form class="autoris">

    <input type="text" name="name_rss" placeholder="Имя" autocomplete="off" ><br>

    <input type="email" name="email_rss" placeholder="Почта" autocomplete="off" ><br>

    <input type="text" name="word_rss" placeholder="Напишите слово «актер»" autocomplete="off" ><br>

    <input type="hidden" name="word_rss_2">

    <input type="submit" value="отправить данные"><br>

    </form>

    </center>

    </body>

    </html>

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

    пример

  6. Отключить повторение заднего фона

    Для того, чтобы задний фон не повторялся несколько раз - для этого в стилях прописывают свойство no-repeat; - выше было свойство no-repeat; было применено...

  7. Как растянуть задний фон на весь экран

    Для того чтобы растянуть задний фон на весь экран используют свойство cover - также было использовано в двух выше идущих примерах


Вас может еще заинтересовать список тем : #CSS | #FOTO | #IMG | #BACKGROUND |
Последняя дата редактирования : 13.12.2020 10:25
Название скрипта :Задний фон на сайт
Скрипт № 88.1Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Комментариев : 5 COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

23/10/2020 08:04 Станислав ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
В Ранее отправленном комментарии о скрипте № 85.1 пункт 2 уже выяснен:
Скорее всего комментарий не будет опубликован, если там вписывается ссылка на приводимый сайт с примером.
По крайней мере подобный комментарий не был отправлен в нем же была просьба увеличить окно ввода контрольной суммы, которая не помещается с двумя знаками, пример: 6+7=13
Спасибо!
Ответить
23/10/2020 01:05 Марат Станислав ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
Да! Тоже исправим...
А с ссылкой... вроде бы исправлял... совсем недавно...сейчас проверю в чем там дело!
Ответить
23/10/2020 01:15 Марат Станислав ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
Посмотрел... количество возможных знаков 3... почему у вас не получилось увидеть 2... непонятно...

wall
Ответить

23/10/2020 07:39 Станислав ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
1.
Скрипт № 85.1
имеется описка в слове: Ссылка на скачив-е-ние:
2. Можно ли предусмотреть, чтобы после отправки комментария, оставалось подтверждение того, что он оправлен на рассмотрение!
Спасибо!
Ответить
23/10/2020 01:03 Марат Станислав ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
Спасибо за внимательность!
1). Исправлено!
2). Что-то я сразу не понял, о каком подтверждении идет речь!?
О любых результатах ваших действий будет сигнализировано выезжающим сообщением в левом верхнем углу.
Сообщение либо сохраняется, либо нет.
Если нет, то в окне будет сказано, почему, и будет покрашено в красный.
Если сообщение записано , то в окне будет ссылка и можно посмотреть результат(скоро сделаем автоматическую переброску с сообщению).
Ответить
Теги:
html картинка на фон как сделать картинку фоном в html как поставить картинку на фон html картинка на задний фон html как вставить картинку на фон в html html картинка фоном страницы картинка фон html на весь экран картинка на фон сайта html фон картинка html css как сделать фон на сайте html картинкой как вставить картинку на задний фон html как сделать картинку задним фоном в html html фон текста картинка как установить картинку на фон в html html задать фон картинкой поставить картинку на фон сайта html html растянуть картинку фон html фон страницы картинка на весь экран html картинка вместо фона как добавить картинку на задний фон html как добавить картинку в html на фон html фон картинка код

Последние комментарии :
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.