stefan22
12/2/2017 - 4:04 AM

gradients & background

about gradiens and background - scaling background image

/*

by default they go from 0,0 to highest 0,Y

----------
|(0,0)   |
|        |
|        |
|(0,y)   |
----------

*/


/*from upperleft to lowerleft*/
#container {
	width: 90%; 
	margin: 0 auto; padding-top: 50%;
	border: 1px solid #ccc;
  background:linear-gradient(#FF0000,#1485CC);
}

/*to bottom right | from upperleft to lowerright */
#container {
	width: 90%; 
	margin: 0 auto; padding-top: 50%;
	border: 1px solid #ccc;
  background:linear-gradient(to bottom right, #FF0000,#1485CC);
}

/*blue(second one) starts at 12% and repeats*/
#container {
	width: 90%; 
	margin: 0 auto; padding-top: 50%;
	border: 1px solid #ccc;
   background:repeating-linear-gradient(to bottom right, #FFCC17,#0D1FFF 12%);
}

/*radial gradient, first color yellow in center, blue outer color*/
#container {
	width: 90%; 
	margin: 0 auto; padding-top: 50%;
	border: 1px solid #ccc;
   background:radial-gradient(#FFCC17,#0D1FFF 65%);
}

/*
 background image scaling 
 1- place image at bottom center or 50% bottom
 2- background size -> cover in order to scale

 3- background-size can be used to add image's width and height too, but here cover does it
 4- background-size => contain when image is bottom center, makes image be as tall as it's
    container's height
*/

#container {
	width: 90%; 
	margin: 0 auto; padding-top: 50%;
	border: 1px solid #ccc;
   background-image:url(sides/css_background/media/louvre.jpg);
   background-repeat:no-repeat;
   background-position:50% bottom;
   background-size:cover;
}

/*
to setup an image as a background image for the entire page,
placed image in the body element, positioned 50% in the bottom of the page
and set background-size to cover.
Also need to add html -> height:100%;
*/

html{
  height:100%;
}

body {
	padding-top: 30px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
   background-image:url(sides/css_background/media/louvre.jpg);
   background-repeat:no-repeat;
   background-position:50% bottom;
   background-size:cover;
}