Продолжая фоновую тему рассмотрим, как делается фоновое изображение в CSS.
Раз речь зашла об изображениях, значит нам прямая дорога в Яндекс. Картинки.
Набираем в поисковике запрос «Яндекс. Картинки», а затем в поисковике сервиса — «Фоновые изображения».
Меня всегда поражало количество изображений, собранных в этом сервисе. Ни разу не удалось просмотреть какой либо запрос до конца. Нескончаемый ресурс.
Так что выбираем то, что Вам нужно, и загружаем выбранные картинки в папку images, в директории сайта.
Если сайта у Вас ещё нет, то как создать директорию сайта читайте в статьях Создание директории сайта и Каркас страницы. Создаём файл.
Размеры изображений должны быть не меньше поля, для которого они предназначены. В противном случае они начнут множиться по умолчанию, а об этом разговор в статье Размноженное изображение
Для внедрения изображения, применяется свойство background-image, в значении которого указывается путь к картинке. Для фона экрана, это свойство задаётся в селекторе body
body{
background-image: url(images/i.jpg);
}Для фона блока это свойство задаётся в селекторе выбранного блока.
div{
background-image: url(images/i1.jpg);
}Создаём html документ (страницу)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
body{
background-image: url(images/i.jpg);
}
div{
background-image: url(images/i1.jpg);
border: 2px solid #e01137;
width: 500px;
height: 250px;
margin: auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Посмотрим результат:
Вот так это смотрится. Переходим на следующую страницу знакомиться с таким свойством фоновых изображений, как множественность, или повтор.
Перемена
— Уважаемые одесситы и гости нашего города! Мы напоминаем, что, если вы заплываете на 15 миль от берега, вам нужен загранпаспорт, потому что это уже территориальные воды Турции.
Как делается фоновый цвет средствами CSS < < < В раздел > > > Размноженное изображение
Как позиционно разместить изображение на странице;
Фиксированное изображение;
Оказывается это совсем не сложно. Я статью написал https://starper55plys.ru/css/adaptivnyiy-sayt/. Вот только в некоторых мобильных браузерах, почему-то немного корявит. Пытаюсь разобраться.
Спасибо за ответ . Да без метода тыка не обойтись. Но там поле и px.
Зашел к Вам на сайт. Вы тему Twenty ten сделали адаптивной !!!!!! Ну молодчина .
Так попробуй изменить на проценты, и посмотреть — что получится. Наш любимый метод тыка.
Спасибо за ответ. Там вставляется код ,который ссылается на плагин В плагине размеры указываются абсолютные
Привет! Я ни разу не ковырял слайдеры, и не знаю их кода, но по идее в них же должен быть задан размер. Если размера нет, то значит слайдер принимает размеры блока header. Если попробовать в каждом размере, (@media screen and (max-width: 600px), @media screen and (max-width: 480px), @media screen and (max-width: 320px) в стилях, вставить селектор .header с точным указанием его размера. Если размеры слайдера указаны, то нужно задать их в процентах. Пусть header и слайдер будут чисто резиновыми. Посмотри в http://deviceponsive.com/, как смотрится. Если нормально, то пусть так и будет. А адаптировать в таком случае нужно меню и сайдбар. Я как раз сейчас этот сайт адаптирую. Можешь посмотреть, но я ещё не закончил. А адаптировать нужно, Андрей Липатцев из google.ru, только и твердит на всех встречах, об адаптивном дизайне, в том смысле, что только за ним будущее. В адаптивных вариантах поменьше воды и картинок, только точная информация. И ссылки и формы покрупнее, чтоб удобнее было пальцами тыкать.
ВЕЧЕР ДОБРЫЙ! К Вам за советом. Адаптивная тема. В header ,кодом прописал слайдер. При просмотре через мобильн. в адаптивной версии , слайдер очень длинный. И как его (слайдер) обрезать под адаптивную версию. Или тему сделать только резиновой
Картинка классная. Позволю совет. Сейчас необходимо чтоб тема обладала адаптивностью и резиновостью в комплексе. Если у Вас это не реализовано, то нужно доработать. Если реализовано, то вообще класс.
А насчёт выложить. Нужно дать шаблону название, и можно на яндекс диск, а на сайт картинку с описанием и кнопкой Скачать. Или на wordpress.org попробовать, только я не знаю как там и что.
Спасибо Вам! Ведь первые шаги делал благодаря Вашим усилиям и учился работать с вебинспектором. Теперь дальше двинуться -php и рисование собственного дизайна. НО мысль » считай, сделал новый шаблон. Можно будет выкладывать, как отдельный продукт» мне очень понравилась. Правда пока не вижу как организационно ее попытаться реализовать. Ведь думаю, то что верстка не моя,не страшно. Но мысль подбросили. У меня есть недостаток в характере , не умею отключаться от проблемы ,пока ее не решу.
Этот принцип и есть самый движущий, ведь при нём любой результат — это РЕЗУЛЬТАТ. А насчёт скопировал дизайн — что ж нам «художникам» ещё остаётся. Всё равно ведь потом этот скопированный десять раз подгоняется, и от первоначального только рожки да ножки остаются.
Приветстую Вас. Да сработал принцип ( который иногда осложняет) — а что если вот так.Но если правда дизайн скопировал с другого сайта. Как художник -:от слово «худо» . Но все равно доволен.Ведь обычно поменять цвет картинку.
Ну ты неутомимый исследователь!!! Это же, считай, сделал новый шаблон. Можно будет выкладывать, как отдельный продукт! А там ещё несколько можно будет сделать, и в них ссылки на сайт разработчика. Перспективка!
tatsek@mail.ru
Добрый вечер. Мне удалось на темы teenty eleven , twenty twelve «натянуть» совсем другой дизайн , не переделать , а сделать уникальный.Даже не ожидал , что у меня получиться. Какая электронка , хочу отправить скрин . Вот для этих целей и пытаюсь освоить 3 фона. Два получилось . Надо дальше освоить три фона.
А три фона действительно необходимы? Может что-то из них сделать картинкой, можно прозрачной, и спозиционировать её так как Вам нужно.
Вечер добрый ! Спасибо ! Не могу разобраться с цифрами . И как расположить внизу если высота в зависимости от наполнения контента.
background:
url( images/aztec_block.png) 0 0 no-repeat,
url(images/aztec_block.png) -576px 100% no-repeat,
url(images/aztec_block.png) -288px 0 repeat-y;
padding: 38px; /* Поля вокруг текста с учетом границы */
}
Привет. Вот тут Как раз то, что Вам нужно. Можно ещё со свойством index попробовать, правда я не делал, но по идее должно получиться.
День добрый ! Подскажите как в одном элементе прописать два background один вверху без повторения , второй за ним повторяющийся. Уже встречал такое . Спасибо !
Спасибо!
Приветствую Вас! Не не переплюну, у меня все как то хаотично. Нет такой системности, как У Вас. Не отвлекайте свое время,которого у Вас сейчас и нет. Удачного продолжения стройки. А еще быстрого продвижения работ!
Вы уже скоро меня переплюнете, и я не смогу наверное ответить на этот вопрос. Придётся гуглить, а у меня стройка. К осени, наверное, уже я к Вам за советом пойду.
Доброго дня! к Вам за консультацией. Если фон делаю изображением ( background-image:….) Как сделать фон полупрозрачным , не используя «opasity» ( так как тогда все элементы принимают прозрачность). Ух ,какие я уже вопросы выясняю- 🙂
Привет! А заключите весь блок в ссылку и всё. Правда валидатор будет ругаться.
Вот так будет правильнее, валидатор принимает, но курсор при наведении не меняется
<div onclick="location.href=’https://starper55plys.ru/’;"><img src="images/s16.png" alt="" width="166" height="68">
Вечер добрый ! Очень часто мысленно говорю ровеснику спасибо ,за подготовку такого материала!!!!!!!! Для меня настольная книга. Благодаря Вам потихоньку продвигаюсь. Не могу сообразить, в «diV» делаю фон картинкой через «style=» ,как Вы учили, там же прописываю габариты. Как на картинку ,которую использую в качестве фона закрепить ссылу в данной продукции.СПАСИБО!!!!!!