Как убрать повторение фона в html

background-repeat

Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Синтаксис

background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit

background-repeat: [ , ]* 

= repeat-x | repeat-y | [repeat | space | round | no-repeat]

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

Значения

no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat . repeat Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat . repeat-x Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat . repeat-y Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat . inherit Наследует значение родителя. space Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство. round Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Результат данного примера показан на рис. 1.

Рис. 1. Повторение фона по горизонтали

Сама фоновая картинка приведена на рис. 2.

Рис. 2. Фон для блока

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundRepeat

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Значения round и space поддерживаются только в IE9 и Opera 11.0.

CSS по теме

Как убрать повторение фона?

До того, как дообавил «background-repeat: no-repeat;» фон повторялся. Теперь после фона просто белая картинка. Почему не работает фиксация изображения?
Писал и background-attachment: fixed;
Всё-равно не работает

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Повторение фона
Добрый день. Не могу понять в чем дело. Прописал фон #bodywrap< position: relative; left.

Повторение фона в одном направлении
Пытаюсь сделать фиктивные колонки. Использую background-image с заданной шириной и высотой 1px.

Убрать разрыв фона в шапке
Добрый день, интересует вопрос, как вообще люди делают хэдер в моём случае, если я вот картинку.

Регистрация: 24.02.2014
Сообщений: 257
triadec_96,

1 2 3 4 5 6

body { background-position: fixed !important; background: url(mbg.jpg) center no-repeat; background-size: 100% 100%; text-align: center; }

Так тоже нет?
Регистрация: 27.12.2012
Сообщений: 448

Сообщение от Blok1

Так тоже нет?
33 / 33 / 15
Регистрация: 07.05.2014
Сообщений: 313

1 2 3 4 5 6

body { background: url('mbg.jpg') no-repeat; background-position: fixed !important; background-size: 100% 100%; text-align: center; }

Добавлено через 31 секунду
Если нет — кинь html

Добавлено через 4 минуты
И кстати, чего пытаемся в конечном итоге добиться?

Добавлено через 8 минут

1 2 3 4

background-image: url('https://www.cyberforum.ru/customavatars/avatar338849_1.gif'); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: fixed;

Работает в последнем яндекс браузере, проверил прямо на твоем макете
Регистрация: 27.12.2012
Сообщений: 448

Сообщение от almaz1994

И кстати, чего пытаемся в конечном итоге добиться?

Пытаемся добиться фиксации фона и прямой пропорции размера изображения с размером окна.
Проблема решилась так:

background: fixed url(mbg.jpg) 0% 0%; background-size: cover;

33 / 33 / 15
Регистрация: 07.05.2014
Сообщений: 313

Сообщение от triadec_96

Пытаемся добиться фиксации фона и прямой пропорции размера изображения с размером окна.
Ты сразу объясняй в следующий раз)) Сразу бы тебе подсказал)
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Не получается убрать часть фона под контентом сайта
В общем, не знаю как это правильнее назвать — в шаблоне сайта место "под текстом" заполняется фоном.

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

PictureBox (PNG). Как убрать лишние части фона
Вообщем создаю игру по типу "Flappy bird", но только вместо птички у меня человек с ракетным.

Как убрать цветную заливку фона некоторых символов
Друзья, может быть ответ на мой вопрос уже давали на этом форуме, но я не нашел. Ситуация.

Убрать повторение комбинаций
Написал разбиение числа на множители, но повторяются некоторые комбинации. Пытался сделать через.

нужно убрать повторение
uses crt; const zn:string=’0123456789ABCDEF’; c:array of.

Как убрать повторение фона в html

• 
• 
• 

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

Как пример:

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

После установки мы видим, что у нам появился один фон, и все смотрится корректно, как на большом мониторе, так и на мобильных аппаратах.

Прикрепления: 5498214.jpg (32.4 Kb)
Администраторы
Сообщений: 43953

• 
• 
• 

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

как убрать у фона отступы

У фона нет отступов, но отступы по умолчанию есть у body, а Вы, по всей видимости, их не сбросили.

Вот Ваш пример с отступами:

html < border: 2px solid red; >.thr-block< background: url("https://avatars.mds.yandex.net/get-pdb/1866711/5d7e1034-d839-4504-83a5-24fb2ea637d6/s1200") no-repeat; width: 100%; height: 1198px; background-size: 1500px; background-position-x: -60px; background-origin: padding-box; >

А вот как будет выглядеть, если сбросить отступы по умолчанию:

html < border: 2px solid red; >body < margin: 0; >.thr-block< background: url("https://avatars.mds.yandex.net/get-pdb/1866711/5d7e1034-d839-4504-83a5-24fb2ea637d6/s1200") no-repeat; width: 100%; height: 1198px; background-size: 1500px; background-position-x: -60px; background-origin: padding-box; >

Существуют разные библиотеки типа reset.css, которые нужно использовать для сброса браузерных стилей (если Вы верстаете без использования фреймворков типа Bootstrap — там сбрасывание уже включено).

Отслеживать
ответ дан 9 окт 2019 в 7:48
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков

Можно просто растянуть фон на весь блок.

background-size: cover; 

Отслеживать
ответ дан 9 окт 2019 в 7:44
420 3 3 серебряных знака 13 13 бронзовых знаков
я пробовал не вышло
9 окт 2019 в 7:49

• css3
• html5

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.