Cacher is the code snippet organizer for pro developers

<!-- Advanced Backgrounds 

   Multiple Background Images  -->

<div class="sketch-img">


</div>

<style>

/*    */

div{
	margin: 50px auto;
	font-size: 1.1em/1.5 sans-serif;
	box-sizing: border-box;
}

.sketch-img {
	width:700px;
	height:500px;
	border-radius: 10px;

	/* separate by comma first image top last image on bottom*/
	background:url('happy-face.jpg') no-repeat right top, url('pencil.jpg') no-repeat left bottom, url ('bg.jpg') #d6dd80; 

	/* separate by comma first image top last image on bottom*/
	background:url ('happy-face.jpg') no-repeat 350px 200px, url('pencil.jpg') no-repeat 50px 50px, url('bg.jpg') #d6dd80;
	
    /* size order  smile - pencil - bg */
    background- size: 200px, 250px, 110%;
    
    /* size with -  width and height */
    background- size: 200px 200px, 50% 45%, 110%;   

}

</style>

/* Full page image */

<!-- Advanced Backgrounds 

   Multiple Background Images  -->

<div class="box"></div>

<style>

html {
	height: 100%; /* important */
	background: ('full-bg.jpg') no-repeat center;
	background-size: cover;
}



/* full img with a box - doesn't work with attachment position fix */

.box{
	width:700px;
	height: 500px;
	padding:30px;
	background: url('full-bg.jpg') no-repeat center;
	border-radius: 15px solid rgba(35,66,97,.6);
	background-size: cover;
	background-clip: padding-box; /* good use when apply transparence in your borders - how far of a background visible extended - border */

	/* background-clip: content-box;  nice effect */

	background-origin: ;
	/* values border-box - padding:box - content-box */
}


</style>

<!-- Background and Border -->

<div class="box">


</div>

<style>

/*    */

.box {
	background-color:#ffffff; /*  can use all the color values  */
	background-image: url('texture.jpg');
	background-repeat: no-repeat;
	background-position: center bottom;
}



</style>