Image background center: CSS background-position property

Разное 

Содержание

Как центрировать фоновое изображение на мобильном телефоне

GemPages

Партнер Shopify

5587 1260 1080

‎03.04.2023 23:23

Привет @libertyworks,

 

Рад поддержать вас сегодня.

 

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

 

1. Перейдите по адресу Изменить код в интернет-магазине :

 

2. Добавьте мой код над тегом на Theme.liquid:

 

 

 

 

 

Когда вы добавите мой код, фон будет выглядеть следующим образом:

 

Надеюсь, мой ответ был вам полезен!

С уважением,
Служба поддержки GemPages.

GemPages — Создавайте любые страницы магазина с высокой конверсией для любого бизнеса
— Если вы найдете мой ответ полезным, нажмите Нравится
и Отметить как решение
— Подключайтесь: App Store | Блог | Сообщество | Справочный центр

260 просмотров

1 Нравиться

Отчет

‎04-04-2023 17:47

@GemPages @SAN_MSWEB @PageFly-Victor Спасибо всем за помощь! Все ваши решения прекрасно сработали. У меня есть еще вопрос:

 

Как изменить логотип шапки только для этой страницы? Я хочу, чтобы логотип этой страницы отличался от логотипа других страниц, используя это изображение:  

212 просмотров

0 Нравится

Отчет

‎05-04-2023 11:51

@libertyworks, извините, но это не входит в мои обязанности. Вы можете попробовать связаться со службой поддержки Shopify или найти другого эксперта по этому вопросу.

185 просмотров

0 Нравится

Отчет

‎03.04.2023 23:33

Привет @libertyworks 

 

Вы можете попробовать этот код, выполнив следующие действия:

Перейдите в Интернет-магазин => темы => действия => изменить код и добавьте этот код в файл theme.liquid перед тегом

 

 

 

 <стиль>
Экран @media и (максимальная ширина: 767 пикселей){
тело # свадьбы {
    background-position: center center !важно;
}
}

 

Надеюсь, этот ответ поможет.

С уважением,

Виктор | PageFly

257 просмотров

1 Нравиться

Отчет

‎04-04-2023 00:29

Привет @libertyworks


Надеюсь, у вас все хорошо, и добро пожаловать в сообщество Shopify!
Я Сан из MS Web Designer.

Пожалуйста, добавьте этот css внизу файла css:

С уважением,

Сан

241 просмотров

1 Нравиться

Отчет

Как центрировать изображение по вертикали и горизонтали в HTML и CSS

Центрирование изображения с помощью HTML и CSS может помочь вам создать ощущение симметрии на вашем веб-сайте и эффективно привлечь внимание к наиболее важным элементам на странице.

Проблема: если у вас нет опыта программирования, согласование любого элемента с HTML-кодом может показаться сложной задачей. В этой статье мы расскажем все, что вам нужно знать о центрировании изображений (или любых встроенных элементов), и проведем вас через несколько руководств, удобных для начинающих. К концу вы сможете центрировать изображения с закрытыми глазами.

Вы узнаете:

  • Как центрировать изображение по горизонтали
    • Использование свойства Text-align
    • Использование свойства Margin
    • Использование свойства Flex
  • Как центрировать изображение по вертикали
    • Использование свойства положения
    • Использование свойства Flex

Зачем центрировать изображения в HTML и CSS?

Во-первых, зачем вам центрировать изображения — или любой другой элемент — в первую очередь? Люди жаждут симметрии в сети и вне ее. Это предпочтение настолько сильное, что оно заложено в нашей нервной системе уже тысячи лет.

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

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

Избранный ресурс

25 хитростей кодирования HTML и CSS

Заполните форму, чтобы получить доступ к вашим советам по программированию и шаблонам.

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

Но сначала подумайте об изучении некоторых основ HTML и CSS, загрузив приведенное ниже руководство.

Узнайте больше: Руководство для начинающих по HTML и CSS

Хотите узнать больше об HTML? Загрузите наше бесплатное руководство с рекомендациями по началу работы с HTML.

Как центрировать изображение в CSS и HTML

Прежде чем мы обсудим различные способы центрирования изображения, важно уточнить, что на самом деле означает «в HTML». Другими словами, где бы вы добавили код «центрирования» для своего изображения? Прямо внутри тега ? Или вам придется сразу переходить к CSS-коду вашего сайта? Давайте взглянем.

Центрирование изображений с помощью устаревшего тега

Когда-то существовал HTML-элемент

. Это был блочный элемент, который автоматически центрировал любые содержащиеся в нем блочные или встроенные элементы. Таким образом, для центрирования изображения потребовалась бы одна строка HTML, которая выглядела бы примерно так:

 
centered image

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

Так как же происходит центрирование изображения в HTML? Самое важное, что нужно понять, это то, что центрирование изображения сегодня потребует от вас добавления CSS в HTML. Вы больше не можете использовать исключительно HTML.

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

Как центрировать изображение по горизонтали в CSS

Существует три способа центрировать изображение по горизонтали. Первый лучше подходит для изображений меньшего размера, а второй — для изображений большего размера. Третий вариант работает лучше всего, если вы используете адаптивную модель макета Flexbox.

Мы рассмотрим все три, чтобы вы могли центрировать любое изображение, независимо от размера, на своем веб-сайте.

Способ 1. Использование свойства Text-Align

Чтобы центрировать изображение по горизонтали, можно использовать свойство CSS text-align. Поскольку это свойство работает только с элементами блочного уровня, а не со встроенными элементами, нам нужно поместить изображение в блочный элемент.

Вот как: 

  • Откройте HTML-файл.
  • Найдите изображение на странице, идентифицируемое по тегу .
  • Оберните изображение в div .
  • Добавьте объявление стиля в открывающий тег вашего div, например
    .
  • Внутри кавычек задайте для свойства text-align значение center , т. е. text-align: center;.

Это просто, но важно отметить, что это работает, только если изображение меньше вашего окна просмотра.

Вот HTML со встроенным CSS и результат:

См. Pen Как центрировать изображение с помощью свойства Text Align от HubSpot (@hubspot) на CodePen.

Попробуйте сами! Модуль кода выше доступен для редактирования. Переключайтесь между вкладками HTML и CSS, редактируйте код и нажмите «Повторить запуск» в правом нижнем углу.

Способ 2. Использование свойства Margin

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

Вот как центрировать изображение с помощью свойства margin: 

  • Откройте файл CSS.
  • Найдите или создайте селектор CSS img .
  • Внутри скобки стиля задайте для свойства display значение block . Это укажет браузеру обрабатывать изображение так, как если бы оно было блочным, а не встроенным элементом, что позволит вам использовать свойство поля CSS.
  • Установите ширину изображения на фиксированное значение, чтобы оно не перекрывало область просмотра. В этом случае я буду использовать процентное значение 60%, но вы также можете использовать пиксели.
  • Задайте для свойства margin значение auto , чтобы оба горизонтальных поля были равны.

Вот результат в CSS:

См. Pen Как центрировать изображение с помощью свойства Margin от HubSpot (@hubspot) на CodePen.

Попробуйте сами! Модуль кода выше доступен для редактирования. Переключайтесь между вкладками HTML и CSS, редактируйте код и нажмите «Повторить запуск» в правом нижнем углу.

Способ 3. Использование свойства Flex

Вы также можете центрировать изображение по горизонтали, используя свойство flex (или flexbox), которое не требует вычисления полей.

Вот как:

  • В HTML-файле найдите изображение, которое вы хотите центрировать.
  • Установите ширину изображения на фиксированное значение длины, т. е. .
  • Поместите изображение в элемент div. У вас также есть дополнительная возможность присвоить div идентификатор или класс. Таким образом, код центрирования применяется только к этому конкретному экземпляру, а не ко всем элементам div.
  • Откройте файл CSS.
  • Найдите свой селектор div или запишите свой идентификатор или селектор класса (#example или .example).
  • Внутри фигурных скобок задайте для свойства display значение flex , которое сообщает браузеру, что div является родительским контейнером, а изображение — гибким элементом.
  • Затем установите для свойства justify-content значение center .

Вот CSS с результатом:

См. Pen Как центрировать изображение с помощью свойства Flex от HubSpot (@hubspot) на CodePen.

Попробуйте сами! Модуль кода выше доступен для редактирования. Переключайтесь между вкладками HTML и CSS, редактируйте код и нажмите «Повторить запуск» в правом нижнем углу.

Нажмите кнопку HTML, чтобы также увидеть код HTML.

Подсказка: как уже упоминалось, мы рекомендуем вам предоставить селектор ID для вашего div и использовать селектор в вашем коде CSS. Таким образом, все элементы div на вашем веб-сайте не будут затронуты.

Как центрировать изображение по вертикали в CSS

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

Способ 1. Использование свойства Position

Чтобы отцентрировать изображение по вертикали, вы можете поместить его в блочный элемент, такой как div, и использовать комбинацию свойства CSS position, свойств left и top и свойства transform.

Вот как: 

  • В HTML-файле найдите изображение, которое вы хотите отцентрировать, и поместите его в элемент div.
  • В файле CSS найдите селектор div или запишите свой идентификатор или селектор класса (#example или .example).
  • Внутри фигурных скобок задайте для свойства position элемента div значение absolute , чтобы исключить его из обычного потока документов.
  • Задайте для свойств left и top значение 50% . Это говорит браузеру выровнять левый и верхний край div, содержащего изображение, с центром страницы по горизонтали и вертикали (т.е. 50% вправо и вниз по странице).

Вот проблема: если края блока div выровнены посередине страницы, он будет выглядеть не по центру. Вот тут-то и появляется свойство преобразования CSS. Чтобы по-настоящему центрировать блок, содержащий изображение, вы можете использовать метод translate() для перемещения блока по осям X и Y.

Вот как:

  • Установите для свойства transform значение translate(-50%, -50%) .
  • Это перемещает элемент div на 50 % влево и вверх от его текущего положения, чтобы центр изображения совпадал с центром страницы.
  • Затем задайте для свойства -ms-transform значение translate(-50%, -50%). Для перемещения влево и вверх вам нужно использовать отрицательные значения, что мы и сделали на этом шаге.

Вот CSS:

См. Pen Как центрировать изображение по вертикали с помощью свойства Position от HubSpot (@hubspot) на CodePen.

Попробуйте сами! Модуль кода выше доступен для редактирования. Переключайтесь между вкладками HTML и CSS, редактируйте код и нажмите «Повторить запуск» в правом нижнем углу.

Способ 2. Использование свойства Flex

Как и раньше, когда мы центрировали изображение по горизонтали, вы можете использовать свойство flex для центрирования изображений по вертикали.

Вот как это сделать:

  • В HTML-файле найдите изображение, которое вы хотите центрировать.
  • Установите ширину изображения на фиксированное значение длины, т. е. .
  • Оберните изображение в элемент div .
  • В коде CSS найдите селектор div .
  • Внутри фигурных скобок задайте для свойства display элемента div значение flex.
  • Установить элементы выравнивания и выравнивания содержимого свойств в центр . Это укажет браузеру центрировать гибкий элемент (изображение внутри div) по вертикали и горизонтали.
  • Затем установите высоту контейнера div на пропорциональную высоту.

Вот CSS с результатом:

См. Pen Как центрировать изображение по вертикали с помощью свойства Position от HubSpot (@hubspot) на CodePen.

Попробуйте сами! Модуль кода выше доступен для редактирования. Переключайтесь между вкладками HTML и CSS, редактируйте код и нажмите «Повторить запуск» в правом нижнем углу.

Как центрировать изображение в Bootstrap

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

Все, что вам нужно сделать, это добавить к вашему образу класс mx-auto. Это автоматически установит горизонтальное поле изображения на автоматический, центрируя изображение.

Вот как: 

  • В HTML-файле найдите изображение, которое вы хотите центрировать.
  • Добавьте класс mx-auto к тегу изображения, т. е. .

Готово! Но если вы хотите также центрировать изображение по вертикали, выполните следующие действия.

  • Оберните изображение в элемент div .
  • Добавьте классы d-flex и align-items-center в div, т. е.
    .

 Класс d-flex объявляет, что родительский элемент div является гибким контейнером, а класс align-items-center центрирует изображение вертикально внутри элемента div. Это работает аналогично CSS Flexbox.

Вот HTML-код с результатом:

См. Pen Centering Image in Bootstrap от HubSpot (@hubspot) на CodePen.

Попробуйте сами! Модуль кода выше доступен для редактирования. Переключайтесь между вкладками HTML и CSS, редактируйте код и нажмите «Повторить запуск» в правом нижнем углу.

Являются ли изображения встроенными или блочными элементами в HTML?

Как видите, процесс центрирования несложный, но зависит от того, являются ли элементы встроенными или блок .

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

Блочные элементы работают, нарушая поток страницы, тогда как встроенные элементы работают, следуя потоку.

Блочные элементы начинаются с новой строки и занимают всю ширину окна просмотра (или ширину страницы). С другой стороны, встроенные элементы занимают место, отведенное их HTML-тегам, что позволяет им двигаться в «потоке» страницы, а не прерывать его. Конечно, ширина и стиль этих элементов зависят от кода CSS для этого тега HTML.

Вот пример, помогающий визуализировать эти различия.

Ниже вы увидите кнопку Bootstrap, оформленную как встроенный элемент и блочный элемент.

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

Тлдр; Блочные и строчные элементы требуют разных методов выравнивания по центру. Например, когда вы центрируете div (который является блочным элементом), вы можете использовать поля и отступы или другие методы.

Однако эти методы нельзя использовать при центрировании изображений.

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

Следует ли центрировать изображения с помощью внутреннего, внешнего или встроенного CSS?

Чтобы центрировать изображение, вам нужно использовать CSS, как мы уже видели. Но у вас есть несколько вариантов: внутренний CSS, внешний CSS или встроенный CSS.

Внутренний CSS размещается в разделе веб-страницы, а внешний CSS располагается во внешней таблице стилей, которая затем связывается в разделе. С другой стороны, встроенный CSS встраивается в HTML-код в разделе. CSS определяется в атрибуте «стиль» целевого элемента.

Как правило, рекомендуется хранить HTML отдельно от CSS, но любой из этих методов даст один и тот же результат. Если по какой-то причине вы не можете их разделить — например, используемая вами платформа для создания веб-сайтов хранит их вместе в редакторе исходного кода — тогда вам придется использовать встроенный CSS.

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

Вот пример встроенного CSS в действии. Допустим, вы хотите изменить цвет текста первого заголовка на своей странице и оставить остальные заголовки как есть. Вы бы установили для свойства color предпочтительный шестнадцатеричный код цвета, поместили его в атрибут стиля и поместили все это в тег h3.

Проверьте это ниже:

См. Пример встроенного CSS Pen от HubSpot (@hubspot) на CodePen.

Как это соотносится с внутренним CSS? Допустим, вы хотели использовать тот же CSS, но поместили его в секцию head между тегами