Div html image background: HTML Background Images

Re: Добавление фонового изображения в HTML-тег div

EK

Новый участник

4 0 0

‎04.08.2018 08:15

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

 <дел>
 

Это создает div, который проходит через всю страницу и имеет красный фон. Я хочу изменить фон с помощью пользовательского файла изображения. Я считаю, что правильный код для использования должен иметь следующую форму:

 background-image: "http://some_url.com/image.jpg" 

Однако добавление этого не сработало. Можете ли вы направить меня к правильному snytax?

Заранее большое спасибо!

3 174 просмотров

0 Нравится

Отчет

Ответы 5 (5)

‎04. 08.2018 12:09 PM

Привет, вы должны использовать что-то вроде этого:

 background: url("someimage.jpg") no-repeat center; 

Лучший,

Джарвис

Джарвис @ Калейдо
— Медленный Shopify Store? Установите наше приложение PageSpeed ​​Magic.
— Есть еще вопросы? Не стесняйтесь , напишите мне .
— Мой ответ помог? Нажмите Нравится , чтобы показать мне немного любви!

3 174 просмотров

1 Нравиться

Отчет

EK

Новый член

4 0 0

‎04.08.2018 12:33

Большое спасибо за быстрый ответ! К сожалению, похоже, что код не работает. (Я использовал файл «.jpg» в разделе «Активы» вместо «someimage.jpg» в вашем ответе.) Как только я нажимаю «Сохранить» и просматриваю публикацию, изображение не появляется. Плюс код как-то трансформируется в:

 background: url(;" no-repeat="" center="" http:="" 

Будем очень признательны за дальнейшую помощь!

3,174 просмотров

0 Нравится

Отчет

‎04. 08.2018 12:38

Привет, EK,

Если вы используете его под активами, у вас будет use background: url(«{{ ‘image.jpg’ | assets_url }}») . Кажется, что-то как-то запуталось. Если вы предпочитаете, мы можем попробовать это, поскольку это небольшое исправление будет совершенно бесплатным. Просто отправьте нам URL-адрес .myshopify.com по адресу [email protected] и мы отправим запрос на соавторство и все решим.

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

Cheers,
J

Джарвис @ Kaleido
— Медленный Shopify Store? Установите наше приложение PageSpeed ​​Magic.
— Есть еще вопросы? Не стесняйтесь , напишите мне .
— Мой ответ помог? Нажмите Нравится

3 174 просмотров

0 Лайки

Отчет

Джейсон

Shopify Expert

11106 217 2261

‎04. 08.2018 15:54

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

https://codepen.io/anon/pen/xJzBER

Когда вы добавили код, он выглядел так, как показано выше? Если вы все еще застряли, опубликуйте именно то, что вы добавляете.

★ В свободное время я захожу на эти форумы, чтобы помочь и поделиться своими мыслями. Не ищу работу и не ищу работу. http://freakdesign.com.au ★

3 174 просмотров

2 Нравится

Отчет

EK

Новый член

4 0 0

‎04.08.2018 20:14

Отлично работает! Большое спасибо!

3 174 просмотров

0 Нравится

Отчет

Основы наложения контента

Натан Ролер

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

. Но что, если вы хотите использовать более сложный контент в качестве фона? Например, предположим, что вы хотите разместить тонкий слайдер только с изображениями, созданный с помощью EasyRotator, за разделом содержимого страницы:

Этот тип конфигурации требует немного больше кода, но все еще относительно прост, как только вы узнаете, что нужно. Лучше всего, когда мы реализуем этот эффект, вы начнете узнавать о мощном свойстве CSS position и множестве возможностей его использования.

Идея

Во-первых, давайте вкратце рассмотрим, как мы будем размещать содержимое и контейнеры:

Каждый из этих трех контейнеров представляет собой

. Первая (№1) — это внешняя оболочка

, которая действует как своего рода «сцена» или «холст». Мы будем применять относительное позиционирование CSS (через position: relative; ), чтобы разрешить управление размещением его подконтейнеров; подробнее об этом чуть позже.

Внутри основного контейнера у нас есть два подконтейнера, которые расположены друг над другом. Первый (элемент № 2 на диаграмме) содержит фоновое содержимое. Второй (элемент № 3 на диаграмме) содержит основное содержимое, с которого мы начинаем. Держатель фона

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

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

Код

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

 
Lorem ipsum dolor sit amet ad infinitum. Наслаждайтесь нашими новейшими данными:
<таблица>
  
    Некоторые данные
    Еще немного данных
  
  
    Некоторые данные
    Еще немного данных
  

 

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

со специальным CSS, применяемым через атрибуты стиля :

 
<дел>
  
  

  
  <дел>
    
  

<дел> . .. весь оригинальный контент здесь ...

Теперь, когда вы видите настоящий код, давайте рассмотрим каждую часть.

Прежде всего, это основной контейнер/обертка div с позицией : относительная . Это позволяет нам использовать position: absolute для его первого дочернего элемента, который является фоновым контейнером. При использовании

осталось: 0; сверху: 0; Я указал, что фон должен быть выровнен точно по верхнему левому углу содержимого; но это можно легко изменить. Например, предположим, что вы хотите, чтобы фон располагался на 200 пикселей вправо и на 100 пикселей вниз от верхнего левого угла содержимого. В этом случае вы бы вместо этого использовали

слева: 200 пикселей; верх: 100 пикселей;

Теперь вы можете размещать HTML-контент любого мыслимого типа в фоновой оболочке — тонкая типографика, изображения, ротаторы и даже видео (не рекомендуется!).

Далее у нас есть оболочка содержимого. Имеет позиции: относительная; , что позволяет нам вручную управлять порядком наложения с помощью свойства z-index . Внутри обертки мы размещаем оригинальный контент, с которого начали.

Обратите внимание, как мы контролируем перекрытие двух внутренних контейнеров. У первого z-индекс 1 , второй z-индекс 2 . Это гарантирует, что фон всегда будет отображаться за содержимым, поскольку он имеет более низкий z-индекс .

Совет: Если вы не знакомы со свойством

z-index и с тем, как оно работает, прочтите другую статью, которую мы недавно опубликовали: Свойство Z-index: как управлять стеком на ваших веб-страницах.

Демонстрация в реальном времени

Вот готовый эффект с использованием ротатора в качестве фонового содержимого за обычным текстом:

Rotator работает на EasyRotator, бесплатном и простом конструкторе слайдеров jQuery от DWUser. com. Пожалуйста, включите JavaScript для просмотра.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius aliquet magna et elementum. Donec lacinia cursus placerat. Maecenas pulvinar odio id nibh lobortis bibendum. Приостановить потенциал. Cras a lorem lorem, eu scelerisque lorem. Cras in risus vel metus auctor viverra accumsan quis metus. Nunc porta scelerisque accumsan. Mauris non porttitor justo. Ut vitae pellentesque arcu. Nunc commodo aliquam elementum. Vivamus pulvinar является сем тристическим автором. Donec id Diam Sed neque faucibus pharetra et vitae orci.

Aliquam в Massa сидеть с лео ornare faucibus. Aliquam rutrum ipsum posuere arcu posuere non porttitor nibh luctus. Sed suscipit, nibh et elementum bibendum, elit nisi sodales tortor, vel lacinia mi arcu non augue. Nunc in eros id orci consectetur imperdiet eu vel massa. Donec fringilla magna non dui mattis euismod. In nec diam augue, vel tristique mi. Duis viverra nibh et eros aliquet nec dapibus felis gravida.

Etiam accumsan, ipsum quis ornare tincidunt, tellus sapien dapibus est, id dictum dolor lectus interdum nibh. Sed leo augue, lobortis ac tincidunt sit amet, tincidunt interdum purus.

Integer velit nisl, tincidunt vel mattis sed, vulputate quis ligula. Suspendisse interdum ante est sollicitudin malesuada. In blandit tortor vel mi sollicitudin и dignissim diam lobortis. Aenean eget est felis, at venenatis neque. Aenean vitae mollis диам. Cras quam magna, pretium eget volutpat ac, tempor ut dolor. Sed sollicitudin porta dictum. Pellentesque обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non sapien non neque rhoncus posuere vestibulum eu felis. Aenean ac sapien nec orci facilisis suscipit ac sit amet ligula.

Ваш друг,
Эйнштейн

Перевернуть все с ног на голову

Мы рассматривали эту технику с точки зрения добавления содержимого за основное содержимое. Но его можно использовать и в обратном порядке — размещать контент поверх существующего контента .

No related posts.