Backgrounds

by b9chris

HTML

<div id=x1></div>
<div id=x2></div>
<div id=x3></div>
<div id=x4></div>
<div id=x5></div>
<div id=x6></div>

SCSS

#x2 {
	background: no-repeat 0 0;
}
#x3 {
	background: no-repeat 50% 50%;
	background-size: cover;
}
#x4 {
	background: no-repeat 50% 50%;
	background-size: contain;
}
#x5 {
	background: no-repeat 100% 0%;
	background-size: contain;
}
#x6 {
	position: relative;
	background: no-repeat 100% 0;
	background-size: contain;
	
	&:before {
		content: ' ';
		display: block;
		background: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_116x41dp.png') 0 0 no-repeat;
		background-size: cover;
		box-sizing: border-box;
		width: 2em; height: 1em;
		position: absolute;
		left: -5px; top: -5px;
	}
}


#x1, #x2, #x3, #x4, #x5, #x6 {
	background-image: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_116x41dp.png');
	min-height: 1em;
	box-sizing: border-box;
	border: 1px solid #888;
	margin-bottom: .5em;
}