imagen de fondo ampliar, recortar pero el contenido es estático

style{ background: url...}
<body>
  <div id = 'content'>
     BLABLABLABLABLBA
  </div>
</body>

I want to know how to set up the background image (in css) to be sure that if i crop the browser window, it will be readjust automatically. BUT the content need to be fix.

Muchas Gracias

preguntado el 12 de junio de 12 a las 20:06

In newer browsers you can use background-size. For older browsers you'll have no choice but to use a <img> tag -

2 Respuestas

Aquí hay una jsviolín that demonstrates the process to have both a fixed sized using position:fixed in a outer div while an inner div holding the image is using background-size:contain.

EDIT: Now an extra div is used to include any border requirements too!
EDITAR-2: Updated jsFiddle with :containno, :cover along with non-abstract image.

For old browsers such as IE6-8 there are many plugins to choose from that allow the use of Estilos CSS3. This jQuery Plugin named backgroundSize.js is specifically for the use of :cover y :contain para background-size and is provided by SO member Louis Rémi if you need that option.

contestado el 23 de mayo de 17 a las 11:05

Un artículo sobre http://css-tricks.com/ , que son perfect-full-page-background-image would be helpful in figuring out your problem. He gives you all of the different methods.

By the way, you just need keep the width of the #content a fixed width.

Respondido el 13 de junio de 12 a las 13:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.