Skip to content

Instantly share code, notes, and snippets.

@vyuh

vyuh/inset_image.html

Created March 18, 2015 05:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vyuh/2e704ea7878f818fda6a to your computer and use it in GitHub Desktop.
Save vyuh/2e704ea7878f818fda6a to your computer and use it in GitHub Desktop.
Download ZIP
To inset an image into another. Like a profile photo over banner photo. whim.png is 1500x500. t_pic.jpg 353x353. Only aspect ratios are important.
Raw
inset_image.html
<html>
<head>
<title>Page Title</title>
<style>
.description {
font-family: Georgia, serif;
font-size: .85em;
text-align: center;
}
.wrapper {
background: url("whim.png");
background-size: cover;
padding: 10%;
margin: 5%;
padding-right: 60%;
}
.inset {
width:30%;
}
</style>
</head>
<body>
<div class="wrapper" >
<img class="inset" alt="pk" src="t_pic.jpg"/>
</div>
<p class="description">
To inset an image into another. Like a profile photo over banner photo.
whim.png is 1500x500. t_pic.jpg 353x353. Only aspect ratios are important.
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment