Как задать положение картинки внутри другой картинки? CSS, HTML

@maxonlinux · Регистрация: 05.06.2016

Author24 — интернет-сервис помощи студентам

Добрый день. Начинаю учить веб-разработку и решил написать простенький сайт. В общем, нужно вставить изображение внутрь другого изображения (рамки). Игрался с абсолютным позиционированием, но ничего хорошего не вышло, гуглил - тоже ничего не нашел. Надеюсь на вашу помощь, заранее спасибо.

@vladkristsun · 27.02.2018, 15:27

Вы рамке задавали position: relative? Если задать, тогда картинке с горами получится задать position: absolute.

@maxonlinux · 27.02.2018, 16:03 **[ТС]**

Сообщение от vladkristsun

Вы рамке задавали position: relative? Если задать, тогда картинке с горами получится задать position: absolute.

задавал. Не помогает. Больше скажу: Картинка не то что не накладывается на рамку, а находится рядом с ней, так еще и не меняет свое положение, когда я перемещаю рамку. Словом, как будто никаких позиционирований и не выставлено.

Добавлено через 9 минут
я лучше покажу Вам мой основной html и css файлы и конкретную задачу. Нужно, чтобы картинка оказалась внутри ноутбука (я взял в пример рамку, чтобы было проще). Видел такое на многих сайтах (там эти картинки еще менялись с различными эффектами).

@vladkristsun · 27.02.2018, 16:25

Попробуйте картинку с рамкой задать фоном (background-image), тогда картинку с горами можно будет спозиционировать даже без position.

@maxonlinux · 27.02.2018, 18:49 **[ТС]**

Сообщение от vladkristsun

Попробуйте картинку с рамкой задать фоном (background-image), тогда картинку с горами можно будет спозиционировать даже без position.

Извиняюсь, задать фоном к какому элементу? Просто если создать пустой div и прописать для него background-image, то ничего не произойдет, пока div не наполнить текстом. После этого фон будет ровно по высоте контента. Размеры этого фона я также не могу задать. Если сделать Макбук фоном для картинки с горами, то фона не видно. Снизу скрины;

p.s. Вот сайт популярного дистрибутива, там сделано примерно как мне надо https://elementary.io/ru/ (там ноут и картинка - это одно изображение, но оно вставлено в фон). Код элемента я открывал, смотрел, но у самого так не получилось.

@vladkristsun · 28.02.2018, 11:08

Сообщение от maxonlinux

Извиняюсь, задать фоном к какому элементу? Просто если создать пустой div и прописать для него background-image, то ничего не произойдет, пока div не наполнить текстом. После этого фон будет ровно по высоте контента. Размеры этого фона я также не могу задать. Если сделать Макбук фоном для картинки с горами, то фона не видно. Снизу скрины;

p.s. Вот сайт популярного дистрибутива, там сделано примерно как мне надо https://elementary.io/ru/ (там ноут и картинка - это одно изображение, но оно вставлено в фон). Код элемента я открывал, смотрел, но у самого так не получилось.

Как бы я делал: создаём пустой div. Задаём ему фиксированную высоту, равной высоте картинке с рамкой, или больше. Для пустого дива фоном вставляю картинку с рамкой в css. Позиционирую её (no-repeat, center, всё остальное подскажет гугл). Затем, в html коде, прописываю картинку с горами. И двигаю её относительно рамки с помощью margin: 0 auto, и марджинов слева-справа. Можно двигать и с помощью position, только диву нужно задать relative, а картинке с горами absolute.

@maxonlinux · 06.03.2018, 00:39 **[ТС]**

Добрый вечер. За время код отредактировал, кинул изображение ноута в фон, но картинку так и не получилось вставить внутрь. При всем при этом интересует, чтобы картинка внутри ноутбука адаптировалась под размеры вьюпорта и не съезжала при изменении размеров окна.
CSS:

Кликните здесь для просмотра всего текста

Код

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700|Roboto:300,400,500,700,900|Rubik:300,400,500,700,900&subset=cyrillic');

* {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	color: #333333;
}

html, body {
	background-color: #ececec;
}

a:hover {
	color: #55EDCD;
	transition: all.2s ease;
	-webkit-transition: all.2s ease;
	-o-transition: all.2s ease;
	-moz-transition: all.2s ease;
	-ms-transition: all.2s ease;
}
#macbook {
	display: block;
	background-image: url(../images/mac.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: all.1s ease;
	-webkit-transition: all.1s ease;
	-o-transition: all.1s ease;
	-moz-transition: all.1s ease;
	-ms-transition: all.1s ease;
}

@media (min-aspect-ratio: 1/1) {
	#macbook {
		margin: 5vh;
		height: 50vh;
	}
}

@media (max-aspect-ratio: 1/1) {
	#macbook {
		margin: 5vw;
		height: 50vw;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto Mono', monospace;
	margin: 10px;
}

.text-container {
	text-align: center;
	line-height: 1.7em;
	margin: auto;
	max-width: 700px;
}

hr {
	margin: 3px;
	border: none;
	height: 1px;
	background-color: black;
}

.img-shadow {
	margin: 100px auto 100px auto;
	-webkit-box-shadow: 0px 0px 30px black;
	        box-shadow: 0px 0px 30px black;
	display: block;
}

#git-logo {
	height: 20px;
	margin: 15px;
}

.nav-menu {
	float: right;
	margin: 15px;
	font-weight: 700;
	font-size: 1.5em;
	line-height: 20px;
}

.nav-menu>a {
	margin: 5px;
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
}

HTML:

Кликните здесь для просмотра всего текста

Код

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="css/styles.css" type="text/css">
      <title="maxonlinux">
    </head>
<body>
	<header>
      <!-- header menu -->
    	<nav>
			<div class="nav-menu">
				<a href="" title="Home">Home</a>
				<a href="" title="About">About</a>
				<a href="" title="Shop">Shop</a>
			</div>
      			<img id="git-logo" src="https://www.cyberforum.ru/images/git.png" alt="git-logo">
		</nav>
	</header>
		<div id="macbook"></div>
		<div class="text-container">
	  		<h2>Hello,</h2>
	  		<p>My name is Max and I'm the beginner web designer. This is my first site I've ever wrote from the beginning. It's not so big and quiet simple, but I'll make it better with my knowledge.</p>
	  	</div>
<footer>
	<div>
		
	</div>
</footer>
</body>
</html>

@maxonlinux · 07.03.2018, 01:25 **[ТС]**

Сообщение от vladkristsun

Как бы я делал: создаём пустой div. Задаём ему фиксированную высоту, равной высоте картинке с рамкой, или больше. Для пустого дива фоном вставляю картинку с рамкой в css. Позиционирую её (no-repeat, center, всё остальное подскажет гугл). Затем, в html коде, прописываю картинку с горами. И двигаю её относительно рамки с помощью margin: 0 auto, и марджинов слева-справа. Можно двигать и с помощью position, только диву нужно задать relative, а картинке с горами absolute.

Смотрите, выше я оставил мною же отредактированный код, где я кинул в фон изображение с ноутом. Но мне важна адаптивность. Картинка вряд ли будет нормально подстраиваться под ноут, у которого меняется масштаб в зависимости от размеров окна.

@maxonlinux 0 / 0 / 0 Регистрация: 05.06.2016 Сообщений: 10
		1
	Как задать положение картинки внутри другой картинки? CSS, HTML 27.02.2018, 15:10. Показов 5900. Ответов 7 Метки css, html (Все метки) Добрый день. Начинаю учить веб-разработку и решил написать простенький сайт. В общем, нужно вставить изображение внутрь другого изображения (рамки). Игрался с абсолютным позиционированием, но ничего хорошего не вышло, гуглил - тоже ничего не нашел. Надеюсь на вашу помощь, заранее спасибо. Миниатюры 0

@vladkristsun 0 / 3 / 0 Регистрация: 19.12.2017 Сообщений: 166
	27.02.2018, 15:27	2
	Вы рамке задавали position: relative? Если задать, тогда картинке с горами получится задать position: absolute. 0

@maxonlinux 0 / 0 / 0 Регистрация: 05.06.2016 Сообщений: 10
	27.02.2018, 16:03 [ТС]	3
	Сообщение от vladkristsun Вы рамке задавали position: relative? Если задать, тогда картинке с горами получится задать position: absolute. задавал. Не помогает. Больше скажу: Картинка не то что не накладывается на рамку, а находится рядом с ней, так еще и не меняет свое положение, когда я перемещаю рамку. Словом, как будто никаких позиционирований и не выставлено. Добавлено через 9 минут я лучше покажу Вам мой основной html и css файлы и конкретную задачу. Нужно, чтобы картинка оказалась внутри ноутбука (я взял в пример рамку, чтобы было проще). Видел такое на многих сайтах (там эти картинки еще менялись с различными эффектами). Миниатюры 0

@vladkristsun 0 / 3 / 0 Регистрация: 19.12.2017 Сообщений: 166
	27.02.2018, 16:25	4
	Попробуйте картинку с рамкой задать фоном (background-image), тогда картинку с горами можно будет спозиционировать даже без position. 0

@maxonlinux 0 / 0 / 0 Регистрация: 05.06.2016 Сообщений: 10
	27.02.2018, 18:49 [ТС]	5
	Сообщение от vladkristsun Попробуйте картинку с рамкой задать фоном (background-image), тогда картинку с горами можно будет спозиционировать даже без position. Извиняюсь, задать фоном к какому элементу? Просто если создать пустой div и прописать для него background-image, то ничего не произойдет, пока div не наполнить текстом. После этого фон будет ровно по высоте контента. Размеры этого фона я также не могу задать. Если сделать Макбук фоном для картинки с горами, то фона не видно. Снизу скрины; p.s. Вот сайт популярного дистрибутива, там сделано примерно как мне надо https://elementary.io/ru/ (там ноут и картинка - это одно изображение, но оно вставлено в фон). Код элемента я открывал, смотрел, но у самого так не получилось. Миниатюры 0

@vladkristsun 0 / 3 / 0 Регистрация: 19.12.2017 Сообщений: 166
	28.02.2018, 11:08	6
	Сообщение от maxonlinux Извиняюсь, задать фоном к какому элементу? Просто если создать пустой div и прописать для него background-image, то ничего не произойдет, пока div не наполнить текстом. После этого фон будет ровно по высоте контента. Размеры этого фона я также не могу задать. Если сделать Макбук фоном для картинки с горами, то фона не видно. Снизу скрины; p.s. Вот сайт популярного дистрибутива, там сделано примерно как мне надо https://elementary.io/ru/ (там ноут и картинка - это одно изображение, но оно вставлено в фон). Код элемента я открывал, смотрел, но у самого так не получилось. Как бы я делал: создаём пустой div. Задаём ему фиксированную высоту, равной высоте картинке с рамкой, или больше. Для пустого дива фоном вставляю картинку с рамкой в css. Позиционирую её (no-repeat, center, всё остальное подскажет гугл). Затем, в html коде, прописываю картинку с горами. И двигаю её относительно рамки с помощью margin: 0 auto, и марджинов слева-справа. Можно двигать и с помощью position, только диву нужно задать relative, а картинке с горами absolute. 0

@maxonlinux 0 / 0 / 0 Регистрация: 05.06.2016 Сообщений: 10
	07.03.2018, 01:25 [ТС]	8
	Сообщение от vladkristsun Как бы я делал: создаём пустой div. Задаём ему фиксированную высоту, равной высоте картинке с рамкой, или больше. Для пустого дива фоном вставляю картинку с рамкой в css. Позиционирую её (no-repeat, center, всё остальное подскажет гугл). Затем, в html коде, прописываю картинку с горами. И двигаю её относительно рамки с помощью margin: 0 auto, и марджинов слева-справа. Можно двигать и с помощью position, только диву нужно задать relative, а картинке с горами absolute. Смотрите, выше я оставил мною же отредактированный код, где я кинул в фон изображение с ноутом. Но мне важна адаптивность. Картинка вряд ли будет нормально подстраиваться под ноут, у которого меняется масштаб в зависимости от размеров окна. 0