Добавление фонового изображения в тег div HTML
EK
Новый участник
4 0 0
04.08.2018 08:15
Я новичок в веб-дизайне и пытаюсь найти «быстрое и грязное» решение следующей проблемы. Я хочу создать раздел в своем блоге, в котором будет изображение, занимающее всю ширину страницы, аналогично основным изображениям. В частности, я использовал следующий код HTML через текстовый редактор:
<дел>
Это создает div, который проходит через всю страницу и имеет красный фон. Я хочу изменить фон с помощью пользовательского файла изображения. Я считаю, что правильный код для использования должен иметь следующую форму:
background-image: "http://some_url.com/image.jpg"
Однако добавление этого не сработало. Можете ли вы направить меня к правильному snytax?
Заранее большое спасибо!
2 996 просмотров
0 Нравится
Отчет
Ответы 5 (5)
04.
08.2018 12:09 PM
Привет, вы должны использовать что-то вроде этого:
background: url("someimage.jpg") no-repeat center; Лучший,
Джарвис
Джарвис @ Калейдо
— Медленный Shopify Store? Установите наше приложение PageSpeed Magic.
— Есть еще вопросы? Не стесняйтесь , напишите мне .
— Мой ответ помог? Нажмите Нравится , чтобы показать мне немного любви!
2,996 просмотров
1 Нравиться
Отчет
EK
Новый член
4 0 0
04.08.2018 12:33
Большое спасибо за быстрый ответ! К сожалению, похоже, что код не работает. (Я использовал файл «.jpg» в разделе «Активы» вместо «someimage.jpg» в вашем ответе.) Как только я нажимаю «Сохранить» и просматриваю публикацию, изображение не появляется. Плюс код как-то трансформируется в:
background: url(;" no-repeat="" center="" http:=""
Будем очень признательны за дальнейшую помощь!
2,996 просмотров
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.
— Есть еще вопросы? Не стесняйтесь , напишите мне
— Мой ответ помог? Нажмите Нравится , чтобы показать мне немного любви!
2 996 просмотров
0 Лайки
Отчет
Джейсон
Shopify Expert
10933 194 2203
04.
08.2018 15:54
Возможно, вы просто неправильно скопировали и вставили код. Я создал очень быстрый пример, используя ваш код, опубликованный выше, а также взял картинку из вашего магазина. Я удалил некоторые дополнительные стили, чтобы вам было легче читать.
https://codepen.io/anon/pen/xJzBER
Когда вы добавили код, он выглядел так, как показано выше? Если вы все еще застряли, опубликуйте именно то, что вы добавляете.
★ В свободное время я захожу на эти форумы, чтобы помочь и поделиться своими мыслями. Не ищу работу и не ищу работу. http://freakdesign.com.au ★
2 996 просмотров
2 Нравится
Отчет
EK
Новый член
4 0 0
04.08.2018 20:14
Отлично работает! Большое спасибо!
2 996 просмотров
0 Нравится
Отчет
7 — Как использовать поле объекта в качестве фонового изображения div в слайд-шоу Views?
спросил
Изменено 8 лет назад
Просмотрено 3к раз
У меня есть поле «фоновое изображение» для определенного типа объекта.
Я хочу иметь возможность загружать туда изображение и отображать это изображение в качестве фонового изображения в div, созданном представлением. Примером использования может быть слайд-шоу Views, где это фоновое изображение будет фоновым изображением просматриваемого слайда, а заголовок объекта и любые другие выбранные поля будут наложены поверх него.
У меня была мысль переписать вывод одного из полей слайд-шоу, но я не уверен, как переписать изображение в положение «фонового изображения».
Возможно ли это? Любые идеи о том, как это сделать?
Спасибо!
- 7
- просмотров
Это больше похоже на вопрос css/html, но здесь:
Вы можете настроить тему для своего представления, чтобы оно выводило каждый слайд следующим образом:
Наложение копии
С вашим CSS следующим образом:
.container {
положение: родственник; /* это необходимо, чтобы содержать все абсолютно позиционированные дочерние элементы */
переполнение: скрыто;
высота: 100 пикселей;
ширина: 1200 пикселей;
}
.
