В этой статье поговорим о том, как установить фоны различных элементов HTML. Вы можете установить следующие свойства фона элемента:

  • Свойство background-color используется для установки цвета фона элемента.
  • Свойство background-image используется для установки фонового изображения элемента.
  • Свойство background-repeat используется для управления повторением изображения в фоновом режиме.
  • Свойство background-position используется для управления положением изображения в фоновом режиме.
  • Свойство background-attachment используется для управления прокруткой изображения в фоновом режиме.
  • Свойство background используется в качестве сокращения, чтобы указать ряд других свойств фона.

Установка цвета фона

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

< html>
   < head>
   < body>
      < p style = "background-color:yellow;">
     Этот текст имеет желтый цвет фона.</p>
   < /body>
   < /head>
< html>

Это приведет к следующему результату -

Установка фонового изображения

Мы можем установить фоновое изображение, вызвав локальные сохраненные изображения, как показано ниже.

< html>
   < head>
      < style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      < /style>
      < body>
         < h1> Привет мир!< /h1>
      < /body>
   < /head>
< html>

Это приведет к следующему результату -

Повтор фонового изображения

В следующем примере показано, как повторить фоновое изображение, если изображение мало. Вы не можете использовать no-repeat значение для background-repeat свойства, если вы не хотите, чтобы повторилось изображение, в этом случае изображение будет отображаться только один раз.

По умолчанию свойство background-repeat будет иметь значение repeat.

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

Следующий пример демонстрирует, как повторять фоновое изображение по вертикали.

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

repeat-y будет повторять фоновое изображение только по вертикали.

В следующем примере показано, как воспроизводить фоновое изображение по горизонтали.

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

repeat-x будет повторять фоновое изображение только по горизонтали.

Установка положение фонового изображения

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

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

Помещение фонового изображения в определенную позицию.

В следующем примере показано, как установить положение фонового изображения на 100px с левой стороны и на 200px вниз.

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

Фоновое положение помещается в шкалу 100px и 200px.

Установка фонового вложения

Фоновое вложение определяет, фиксировано ли фоновое изображение или прокручивается остальная страница.

В следующем примере показано, как установить фиксированное фоновое изображение.

< html>
   < head>
     < style>
         body  {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      < /style>
      
   < /head>
   < body>
   
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      
   < /body>
< /html>

Это приведет к следующему результату -

Если вы не видите полосы прокрутки, попробуйте изменить размер окна браузера.

В следующем примере показано, как установить прокручиваемое фоновое изображение.

< html>
   < head>
  
      < style>
         body  {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }.
      < /style>
     
   < /head>
   < body>
  
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
     
   < /body>
< /html>

Это приведет к следующему результату -

Если вы не видите полосы прокрутки, попробуйте изменить размер окна браузера

Сокращенное описание

Вы можете использовать свойство background, чтобы сразу установить все свойства фона. Например,

< p style="background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
< /p>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok