• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Убрать дублирование фона и картинки в CSS (Как сделать, чтобы поставленный фон в блоке не повторялся)
Убрать дублирование фона и картинки в CSS
Kosten
Дата: Пятница, 2019-10-11, 22:29 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25228
Награды: 57


Из этого мануала вы узнаете, почему при установки фона на сайт или в блок он повторяется, что смотрится очень не красиво. А нам нужно просто устранить все изображение и оставить одну картинку, которая и будет основным фоном. Это может быть как на сайта, где ставим основной фон, так и в любом блоке, что выставляя фон, мы создаем красивое оформление, а здесь видим, что он просто повторяется.

Чтоб он не повторялся, то к свойству свойство background добавить команду no-repeat, которая автоматически запретит создавать новые повторы.



Как пример:

Код
body {
    background: url(Ссылка на фоновую картинку.png)  no-repeat;  
   }


После установки мы видим, что у нам появился один фон, и все смотрится корректно, как на большом мониторе, так и на мобильных аппаратах.
Прикрепления: 5498214.jpg(32.4 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2019-10-16, 11:17 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25228
Награды: 57


Свойство background-repeat в CSS используется для повторения фонового изображения как по горизонтали, так и по вертикали. Он также решает, будет ли фоновое изображение повторяться или нет.

Для того, чтоб выключить дублирование картинки, то здесь задействуем свойство background-repeat со значением no-repeat. Если вы хотите оставить повторение только по горизонтали или вертикали, тогда используйте свойство repeat-x или repeat-y соответственно.

Как пример:

HTML

Код
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
    <p>Повторяется по вертикали и горизонтали:</p>
    <div></div>
    <p>Повторяется по вертикали:</p>
    <div class="repeat-y"></div>
    <p>Повторяется по горизонтали:</p>
    <div class="repeat-x"></div>
    <p>Не повторяется:</p>
    <div class="norepeat"></div>
</body>
</html>

CSS

Код
div {
    width:400px;
    height:200px;
    background-image: url('http://zornet.ru/_fr/83/2539077.jpg');
}

    div.repeat-y {
  background-repeat:repeat-y;
    }
    
    div.repeat-x {
  background-repeat:repeat-x;
    }
    
    div.norepeat {
  background-repeat:no-repeat;
    }
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Убрать дублирование фона и картинки в CSS (Как сделать, чтобы поставленный фон в блоке не повторялся)
  • Страница 1 из 1
  • 1
Поиск: