Сегодня речь пойдет о том, как разместить бекграундную картинку в правом нижнем углу контейнера с текстом.
Довольно часто небольшие статьи сопровождаются фоновыми картинками для визуального украшения веб-странички. Чтобы оформить статью по особенному, дизайнеры часто прибегают к нестандартным решениям в позиционировании картинки. сегодня будет рассмотрен тот вариант, когда какую либо картинку нужно закинуть в нижний угол контейнера по правой стороне.
Для определения позиции вашей фоновой картинки необходимо использовать команду background-position, но я вам советую применять универсальный оператор background, который отвечает за все параметры настроек фона, это сократит ваш код. Выбранное нами положение соответствует командам right bottom. То есть, мы говорим CSS, что хотим видеть нашу картинку внизу справа. Не забываем также указать значение no-repeat, что не позволит зациклить вывод фона на весь родительский контейнер.
От слов переходим к делу
CSS
html { height: 100%; } body { background: url(fon.png) right bottom no-repeat; padding-right: 200px; }
Для того, чтобы текст не наплывал на наш фон, зададим правый отступ родительскому контейнеру через свойство padding-right. Также обращаю ваше внимание на высоту тега html. Это связано с тем, что мы задаем положение блока справа внизу, а чтобы то же самое происходило в окне браузера — нужно растянуть родителя на всю высоту окна.
Итак, смотрим, как браузер реагирует на наш код
В каких браузерах работает?
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
