Как задать фоновое изображение для div?

Question

Андрей Любименко @andrewlybimenko

HTML
CSS

Как задать фоновое изображение для div?

Приветствую,подскажите пожалуйста как реализовать следующее:
Есть контейнер div определённого размера 200x1000px, хочу вместить в этот контейнер фон - картинку, с её повторением по оси x, и наверх этого контейнера(наверх по фону) наложить ещё картинку меньшего размера и справа от неё надпись, не могу понять чего не хватает - изображение не загружается на фон, выскакивает снизу,где угодно - но не внутри под другой картинкой.Подскажите пожалуйста в чём ошибка;

Вопрос задан более трёх лет назад
106 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Eugene Chefranov @Chefranov

приведите ваш код

Написано более трёх лет назад

Андрей Любименко @andrewlybimenko Автор вопроса

<!DOCTYPE html>
<html>
<head>
	<title>Пробый div</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="footer">
		<div class="fon"></div>
		<div class="img">
			<img src="footer1.png" alt="картинка1">
			<p>Текст который должен распологаться справа от картинки </p>
		</div>
	</div>
</body>
</html>

.footer{
	height:200px;
	width: 1000px;
	border:1px solid black;
}
.fon{
	background: url(footerFon.png) repeat-x;
	height: 195px;
	left: 0;
	bottom: 0;
	position: absolute;
	float: left;
}
.img{
	height: 30px;
	width: 30px;
	float: left;
}

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Решения вопроса 1

3 комментария

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Простой
Как такое сверстать?
- 1 подписчик
- 16 часов назад
- 145 просмотров
2

ответа
CSS

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- 20 окт.
- 145 просмотров
0

ответов
CSS

+1 ещё

Простой
Почему после изменений в css на сайте нет изменений?
- 1 подписчик
- 13 окт.
- 215 просмотров
3

ответа
CSS

Простой
Как выровнять в гриде по горизонтали?
- 1 подписчик
- 13 окт.
- 158 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в руководстве steam сделать обтекающий картинку текст?
- 1 подписчик
- 08 окт.
- 132 просмотра
1

ответ
CSS

+2 ещё

Средний
Как решить проблему с появлением пустого пространства под drawer из shadcn?
- 2 подписчика
- 02 окт.
- 104 просмотра
1

ответ
HTML

+1 ещё

Средний
Скачал плагин image preview в вс коде, чтобы установить иконку сайта. Иконка появилась в браузере, но не появилась слева напротив строки. Почему так?
- 1 подписчик
- 30 сент.
- 153 просмотра
1

ответ
CSS

Простой
Как пофиксить визуальный глитч с border-radius и transparent + blur?
- 2 подписчика
- 26 сент.
- 156 просмотров
2

ответа
CSS

Простой
CSS3 как выбрать последние 4 элемента?
- 1 подписчик
- 25 сент.
- 213 просмотров
2

ответа
HTML

+1 ещё

Простой
От какой технической характеристики компьютера зависит скорость работы сайта, указанного ниже?
- 1 подписчик
- 24 сент.
- 458 просмотров
2

ответа
Показать ещё Загружается…

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

PHP-разработчик

Prosox

До 1 200 $

<!DOCTYPE html> <html> <head> <title>Пробый div</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="footer"> <div class="fon"></div> <div class="img"> <img src="footer1.png" alt="картинка1"> <p>Текст который должен распологаться справа от картинки </p> </div> </div> </body> </html>

.footer{ height:200px; width: 1000px; border:1px solid black; } .fon{ background: url(footerFon.png) repeat-x; height: 195px; left: 0; bottom: 0; position: absolute; float: left; } .img{ height: 30px; width: 30px; float: left; }

Answer 1 · 2018-10-05 12:52:09

dicem @dicem

Я конечно мейби ничего не понимаю в вашем вопросе но вот:

Ответ написан более трёх лет назад

3 комментария

Как задать фоновое изображение для div?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт