I'm working with bootstrap and I have a high definition image that will be used as background for an area. What happens is that I have two problems:
My background has to adapt to losses at various resolutions, it will always be centralized, like the example below:
Inthiscase,theredimagecorrespondstothetotalareaoftheimageandtheblueimageisonlywhatisbeingavailable.HowcouldIproceed?
1stTheotherproblemisthattheimagewillhaveascrollingsimilartothebackgroundimagesofthatsite: link
p>1st About the image stay in the center, in a simple way, you can use the following CSS code:
What it does is basically expand the image to the full context of the div it is in, adjusting the height and width when needed, and with the 'center center' command in the background you indicate that it should be centered, not the monitor imports.
html{
background: url(URL_Exemple.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Practical Example: JsFiddle
2nd About Scrolling, I understand what you mean by "Parallax", the effect of the image moving slowly inside the block as the user moves the scroll.
There are several ways to do this, I recommend reading on this topic from our friend Diego Eis