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

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

Joomla 3.x. Как сделать фоновое изображение (parallax) адаптивным

Из этого туториала Вы узнаете, как сделать фоновое изображение (image background) адаптивным в Joomla 3.x.

Joomla 3.x. Как сделать фоновое изображение (parallax) адаптивным

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

  1. Используйте Инструмент исследования элементов (F12) (Inspect Element tool) браузера, для того чтобы узнать, какая строка CSS отвечает за расположение изображения: откройте Панель исследования элемента и наведите курсором мыши на фоновое изображение, для того чтобы узнать, какой файл и какая строка кода отвечают за стили фонового изображения.

  2. Добавьте свойство background-size (the background-size property) в строку, которая отвечает за стиль фонового изображения. Это свойство определит размер фонового изображения. Для того чтобы сделать изображение адаптивным, задайте размер 100%.

    Есть два варианта, как задать параметры размера изображения, для того чтобы сделать его адаптивным:

    background-size: 100% 100%;

    И:

    background-size: 100% auto;

    Значения задают ширину и высоту (width and height) изображения. Если Вы зададите высоту 100%, фоновое изображение отобразитися в полную высоту, но оно может выглядеть сжатым. Мы советуем задать высоту auto, для того чтобы изображение не выглядело искаженным на разных устройствах:

    Joomla 3.x. How to make background (parallax) image responsive

  3. Войдите на ваш сервер при помощи FTP или Файлового менеджера Панели управления хостингом, откройте и редактируйте файл. Используйте сочетание клавиш Ctrl/Cmd+F to, для того чтобы найти строку кода CSS, в которую нужно внести изменения. Замените исходную строку CSS на новую.

  4. Сохраните изменения и проверьте ваш сайт.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Joomla 3.x. Как сделать фоновое изображение (parallax) адаптивным

 
Чат
We help you to choose the right product.
Начать чат