Years back we would only see 1 or 2 background images for websites, normally a solid color or maybe a simple repeded pattern that would run the width of the website. Eventually as the our ISP speeds increased we developers would start making these images more complex and larger. Now we are running an average speed of 8 megs a second on download, that could mean a 5000x35000px image could be loaded inside a web-page over 16times in one second. So what does this mean for web designers?
Much more flexible high quality images in your website! Yahhhh!!! So the same high quality photo you take with your iphone 5 can be be displayed on your webpage at the qualtiy it deserves with little impact on the viewers overall page loading. Super cool.
So why do I speak about these as background images, not just placed in-line images? Well the only way to really enjoy large images is by making them flexible with the page size. As “foreground images” will do this with a percentage style attached them, you can’t enjoy those little details you look for in high quality photos.
BACKGROUND Example 1
CSS:
background-attachment: fixed; */THIS IS HOW TO GET THAT COOL FAKE PARALLAX LOOK/*
background-color: #AAAAAA; */THIS FILLED IN THE BOX WITH A COLOR TILL THE IMAGE LOADS/*
background-image: url(https://rysight.com/wp-content/uploads/2014/01/Lady-Liberty-and-Manhattan.jpg); */YOUR IMAGE/*
background-position: center center; */PLACEMENT OF IMAGE, HELPFUL WHEN USING FIXED POSITONS/*
background-repeat: no-repeat;
padding: 50px 0px; */THIS TRICK IS GOOD WHEN YOU WANT TO ADD TEXT INSIDE THE BOX THIS IS BETTER THEN HEIGHT CSS PROPERTY/*
color: #ffffff; */JUST THE TEXT COLOR/*
*/THIS WILL DETERMINE HOW THE BROWSER WILL FILL THE DIV/*
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
BACKGROUND Example 2
CSS:
background-attachment: scroll;
background-color: #AAAAAA; */THIS FILLED IN THE BOX WITH A COLOR TILL THE IMAGE LOADS/*
background-image: url(https://rysight.com/wp-content/uploads/2014/01/Lady-Liberty-and-Manhattan.jpg); */YOUR IMAGE/*
background-position: center center; */PLACEMENT OF IMAGE, HELPFUL WHEN USING FIXED POSITONS/*
background-repeat: no-repeat;
padding: 50px 0px; */THIS TRICK IS GOOD WHEN YOU WANT TO ADD TEXT INSIDE THE BOX THIS IS BETTER THEN HEIGHT CSS PROPERTY/*
color: #ffffff; */JUST THE TEXT COLOR/*
*/THIS WILL DETERMINE HOW THE BROWSER WILL FILL THE DIV/*
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
BACKGROUND Example 3
CSS:
background-attachment: fixed; */THIS IS HOW TO GET THAT COOL FAKE PARALLAX LOOK/*
background-color: #AAAAAA; */THIS FILLED IN THE BOX WITH A COLOR TILL THE IMAGE LOADS/*
background-image: url(https://rysight.com/wp-content/uploads/2014/01/Lady-Liberty-and-Manhattan.jpg); */YOUR IMAGE/*
background-position: center center; */PLACEMENT OF IMAGE, HELPFUL WHEN USING FIXED POSITONS/*
background-repeat: no-repeat;
padding: 50px 0px; */THIS TRICK IS GOOD WHEN YOU WANT TO ADD TEXT INSIDE THE BOX THIS IS BETTER THEN HEIGHT CSS PROPERTY/*
color: #ffffff; */JUST THE TEXT COLOR/*
*/THIS WILL DETERMINE HOW THE BROWSER WILL FILL THE DIV/*
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
