Задать вопрос
@Dvoeglazov

Как сделать фон видимым?

Суть вопроса в картинках
b431a835d23d4771a69a0bfa3edd621d.png504549face964bd297283a737160d005.png
  • Вопрос задан
  • 211 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Вырежи картинку с телефоном вот так как на картинке салатовая рамка. Расстояния, помеченные желтыми стрелками должны быть одинаковыми и равны выступающей части картинки.
Потом положи ее фоном на внешний широкий див с выравниванием по центру.
Если у тебя резина, попробуй на разных размерах экрана ставить background-size - cover или contain. Так можно будет добиться хорошего отображения.
89271bfdaa034343b0e9a1cc6256924b.jpg
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Смотри.
У тебя есть два листа бумаги.

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

Почему бы не применить фон сразу к родителю? Или сделать общего родителя для этих двух?
Ответ написан
@Dvoeglazov Автор вопроса
<body>
<div class="third_stage">
		<div class="bg_4">
			<div class="text_bg text_bg_4">
				<h2>3 Этап</h2>
				<h2>Дизайн</h2>
				<p>Подготовив гайдлайн приступили к разработке дизайна приложения.</p>
				<p>Интерфейс выполнен в “плоском” стиле. При разработке дизайна очень важно было учитывать простоту и скорость трансформации интерфейса под другие игры в следующих версиях приложения. Выбранный стиль отлично подошел для решения этой задачи.</p>
				<p>Помимо элементов интерфейса и иконок разработаны уникальные иллюстрации для главного меню приложения — “Игры”, “Призы”, “Рейтинги”.</p>
			</div>
		</div>
	</div>
</body>


.third_stage {
	
	background: linear-gradient(30deg, #315a7b 30%, #6b5a7b 30%, #6b5a7b 100%);
	min-width: 1235px;
	position: relative;
	z-index: 20;
}

.bg_4 {
	background: url(../images/phone.png) no-repeat 200px top;
	position: relative;
	z-index: 3;
	margin: 0 auto;
	height: 4431px;
	width: 1235px;
	
	outline: 1px solid red;
}

.text_bg_4 {
	background: transparent;
	top: 200px;
	left: 0;
}
Ответ написан
Комментировать
@Bondi
возможно через z-index ?
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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