background-image enlarge, crop but the content is static

Question

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.

Thanks

In newer browsers you can use background-size. For older browsers you'll have no choice but to use a tag — Thomas, Jun 12 '12 at 19:57

score 0 · Answer 1 · edited Jun 13 '12 at 12:19

0

An article on http://css-tricks.com/ called 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.

edited Jun 13 '12 at 12:19

Josh Mein

28,107
15
76
87

answered Jun 12 '12 at 20:42

abelb

51
4

score 0 · Accepted Answer · edited May 23 '17 at 10:24

Here is a jsFiddle 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!
EDIT-2: Updated jsFiddle with :contain, not :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 CSS3 Styles. This jQuery Plugin named backgroundSize.js is specifically for the use of :cover and :contain for background-size and is provided by SO member Louis-Rémi if you need that option.

background-image enlarge, crop but the content is static

2 Answers2