Фоновая картинка в html: Как добавить фоновый рисунок на веб-страницу?

html — Фоновая картинка поверх изображения, накладываемого hover

Для ссылки пункта-меню задана фоновая картинка

<div>
            <ul>
                <li><a href="">Каталог изображений</a></li>
             </ul>
        </div>​

при наведении мышки задано, что сверху накладывается другая картинка, и она перекрывает ту картинку, что задана бэкграундом http://jsfiddle.net/y8AJF/7/ . Подскажите, как сделать так, чтобы фоновая картинка пункта меню оставалась поверх того изображения, что накладывается hover’ом? Вносить изображение в теге img в ссылку не хотелось бы.

• html
• css

Почитайте про множественный background.

Можно тут http://habrahabr.ru/company/microsoft/blog/137705/ или тут http://htmlbook.ru/css/background-position

И поэксперериментируйте…

Или поменяйте условие

#nav ul  li:hover {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854. png') no-repeat;
}

5

в CSS есть такое свойство: z-index: [значение] отображает последовательность отображения элементов.

1

Несколько background можно указывать через запятую вот так:

url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat, url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854.png')  no-repeat;

#nav ul {
    display: inline-block;
    position: relative;
    z-index: 999;
    margin-top: 0;
    margin-left: 130px;
}
    
#nav ul  li {
    display: inline-block;
    list-style-type: none;
    width: 116px;
}

#nav ul  li a {
    display: inline-block;
    text-align: center;
    width: 116px;
    height: 145px;
    padding-top: 90px;
    text-transform: uppercase;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #5c5c5c;
}

#nav ul  li a.
  item1 {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat;
    position: relative;
    z-index: 9999;
}

#nav ul  li a:hover {
    background: 
    url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat, url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854.png')  no-repeat;
    width: 116px;
    height: 145px;
    color: #ffffff;
}

<div>
        <ul>
            <li><a href="">Каталог изображений</a></li>
         </ul>
    </div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Пропорциональное изменение размера изображений с сохранением соотношения сторон

Иногда изображения слишком велики для отображения на веб-странице. Нам не нужен JavaScript, чтобы исправить это. Мы можем пропорционально изменять размеры изображений с помощью тегов изображений HTML или стилей фона CSS. Давайте посмотрим на различные параметры, которые у нас есть для изменения размера изображений, сохраняя при этом их соотношение сторон.

Изменение размеров тегов изображений HTML

Наш первый выбор — установить только одно свойство size, либо width или высота , браузер автоматически рассчитает размер другого края.

Представьте, что у нас есть изображение кота с соотношением сторон 4:3 , другими словами, его размеры 4032 × 3024 , это много кота.

Если мы хотим, чтобы он отображался немного меньше, мы можем установить width на 240 , тогда браузер автоматически рассчитает высоту как 180 .

Есть одно предостережение. Изображения доступны не сразу.

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

Это плохая новость для производительности вашей страницы.

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

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

Но не бойтесь, мы можем исправить это с помощью CSS.

 изображение {
    подходит для объекта: содержит;
} 

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

 изображение {
    объект подходит: обложка;
} 

Что делать, если наше изображение нужно ограничить шириной родительского элемента? В этой ситуации мы можем использовать CSS max-width или

ширина , чтобы соответствовать изображению.

Используйте max-width: 100% , чтобы ограничить размер, но разрешить меньшие размеры изображения, используйте width: 100% , чтобы всегда масштабировать изображение в соответствии с шириной родительского контейнера.

 <дел>
    
 

 раздел {
    ширина: 240 пикселей;
    граница: 1px сплошной розовый;
}
картинка {
    максимальная ширина: 100%;
    подходит для объекта: содержит;
} 

Далее мы можем использовать CSS для исправления соотношения сторон изображения, узнайте больше о представлении изображений с определенным соотношением сторон.

Изменение размера фоновых изображений CSS

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

 <дел> 

 раздел {
    фон: url('cat. jpeg') без повтора;
    граница: 1px сплошной розовый;
} 

Мы можем исправить это, установив размер фона собственность. Чтобы разместить изображение внутри элемента, мы используем значение , содержащее . Браузер поместит изображение внутри границ элемента и пропорционально масштабирует его.

 <дел> 

 раздел {
    фон: url('cat.jpeg') без повтора;
    размер фона: содержит; /* масштабирует изображение */
    фоновая позиция: центр; /* центрирует изображение */
    граница: 1px сплошной розовый;
} 

Подобно object-fit , мы также можем использовать значение cover , чтобы сообщить браузеру, что элемент должен быть покрыт пикселями кошки. Как вы можете видеть ниже, это заставит его уменьшиться настолько, чтобы соответствовать вертикальному пространству, теперь обрезана только правая сторона нашего кота.

 <дел> 

 раздел {
    фон: url('cat.jpeg') без повтора;
    размер фона: обложка;
    граница: 1px сплошной розовый;
} 

Мы также можем указать единственное значение width для свойства background-size . Подобно элементу img , высота будет рассчитана автоматически.

 <дел> 

 раздел {
    фон: url('cat.jpeg') без повтора;
    размер фона: 200 пикселей;
    граница: 1px сплошной розовый;
} 

Вот оно!

Как добавить пользовательское фоновое изображение в любую тему Shopify [Обновлено в 2023 г.]

Устали от простого белого фона вашей темы? Аккуратное фоновое изображение на вашем веб-сайте может стать смелым способом заявить о своем бренде: хорошо продуманное красивое изображение, абстрактное или нет, несет в себе силу.

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

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

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

Загрузите изображение на свой веб-сайт

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

1. На странице администратора перейдите к Content > Files .

   
   

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

   
   

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

   
   

Добавление изображения на тело веб-сайта

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

1. В админке Shopify перейдите к интернет-магазину > темы > действия > изменить код
2. Нажмите Добавить новый фрагмент и создайте фрагмент с точным именем:

   ezfy-background-image

3. Вставьте следующий код во вновь созданный файл:
4. Замените текст «replaceme.jpg» URL-адресом изображения, которое вы скопировали. заранее. Убедитесь, что он также находится между кавычками.

5. Найдите файл theme.liquid ;
6. В найденном файле theme.liquid нажмите CTRL + F и выполните поиск:

   
   

7. Вставьте следующий код справа под .

   {% include 'ezfy-background-image' %}
   

Это добавит фоновое изображение к основному тексту, а также ко всем разделам, кроме заголовка, панели объявлений и нижнего колонтитула. Вот как это выглядит в теме Dawn:

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

Не забудьте удалить строку « {% include ‘ezfy-background-image’ %} » из файла theme.liquid, если вы не будете использовать приведенный выше код. Вы также можете удалить файл «ezfy-background-image», если хотите, но удаление только этой строки гарантирует, что производительность веб-сайта не пострадает.

Добавление изображения в отдельные разделы

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

1. Из кода редактирования , в левом верхнем углу нажмите на три точки и выберите Customize .

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

3. Прокрутите вниз, пока не найдете «Пользовательский CSS» .
4. Вставьте следующий код. Не забудьте заменить «replaceme.jpg» URL-адресом вашего изображения:

   > * { background: url("replaceme.jpg") !important; }
   

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

Помните о производительности

В этом уроке я использовал изображение JPG размером 1,78 МБ. Для обучения это нормально, но в реальном магазине вы не хотите использовать такие большие изображения, особенно в качестве фонового изображения.

Я бы порекомендовал образ размером не более 500 КБ, также убедитесь, что вы используете .webp вместо .jpg. WEBP работает намного лучше.

Если вы работаете вместе с разработчиком, вы также можете изучить возможность разработки индивидуального выбора для вашей темы, где вы можете реализовать отложенную загрузку, добавить настраиваемое поле для быстрой загрузки изображений на странице настройки и некоторые другие дополнительные функции, чтобы легко A /B проверьте, что лучше всего подходит для вашего бизнеса.