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;
}