Background com Perdas

Asked

Viewed 55 times

2

I am working with bootstrap and I have a high definition image that will be used as the background of an area. What happens is I have two problems:

1º My background has to adapt with losses to several resolutions, it will always be centralized, as the example below:

inserir a descrição da imagem aqui

In this case, the red image corresponds to the total area of the image and to blue, only what will be available. How could you proceed?

1º The other problem is that the image will have a scrolling similar to the background images of this site: http://www.whitepavilion.com.br/homologacao/

css twitter-bootstrap

1 answer

4


first On the image stay in the center, simply, you can use the following CSS code:

What it does is basically expand the image to the entire context of the div in which it is, adjusting the height and width when necessary, and with the 'center center' command in the background you indicate that it should be centered, no matter the monitor.

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 you are referring to "Parallax", effect of the image moving slowly inside the block as the user makes the movement in scroll.

There are several ways to perform this procedure, I recommend giving a read on this topic of our friend Diego Eis

Simple parallax with Jquery and CSS

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.