Как сделать чтобы картинка не повторялась css

Как сделать, чтобы фон не повторялся?

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

Решение

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

Описание

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

Общий синтаксис в этом случае будет следующий.

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

Основы работы с фоном

Самое простое, что может быть при работе с фоном — это заливка фона элемента одним цветом. Это делается с помощью свойства background-color, которое принимает те же значения, что и хорошо известное вам свойство color.

Давайте зальем блок зеленым фоном (цвет текста при этом сделаем белым):

Так код будет выглядеть в браузере:

Блок . Свойство background-image

Свойство background-image задает фоновую картинку. Делается это следующим образом: background-image: url("путь к картинке").

Путь к картинке обычно берут в кавычки (двойные или одинарные), но можно также и без них.

Давайте в качестве фона блоку зададим следующую картинку:

Картинка смайла для фона.

Смотрите, что у нас получится — наша картинка размножится по всему блоку, замостит его:

Так код будет выглядеть в браузере:

Блок . Свойство background-repeat

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

Оно позволяет делать следующее: если задать значение no-repeat, то картинка вообще не будет повторяться, если задать значение repeat-x — будет повторяться по оси X (то есть по горизонтали), а если repeat-y — картинка будет повторяться по оси Y (по вертикали).

Ну, а значение repeat задает поведение по умолчанию — картинка будет повторяться по всем осям.

Давайте посмотрим, как работает это свойство.

Значение no-repeat

Давайте свойству background-repeat зададим значение no-repeat — в этом случае картинка не будет повторяться вообще и станет в верхний левый угол:

Так код будет выглядеть в браузере:

Значение repeat-x

А теперь зададим значение repeat-x — фоновая картинка станет повторяться по горизонтали:

Так код будет выглядеть в браузере:

Значение repeat-y

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

Так код будет выглядеть в браузере:

Блок . Свойство background-position

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

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

Сдвиг фона ключевыми словами

С помощью ключевых слов можно двигать фон по горизонтали и по вертикали, но не в любое место, а в определенные позиции. К примеру, по горизонтали фон можно поставить слева (значение left), справа (значение right) и по центру (значение center), а по вертикали — сверху (значение top), по центру (значение center) и снизу (значение bottom).

Чтобы указать позицию фона, нужно написать, где он должен быть по горизонтали, а где по вертикали.

К примеру, значение right bottom, поставит фон в правый нижний угол, значение left bottom — в левый нижний угол, а значение left center — поставит фон по центру слева. Если вы хотите поставить фоновую картинку по центру всего блока — напишите center center. При этом можно использовать сокращенный вариант — не писать слово center два раза, а указать его один раз.

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

Поставим для свойства background-position значение right bottom — правый нижний угол:

Как сделать чтобы картинка не повторялась css

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

Как пример:

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *