CSS - Usage of background-attachment

Question

Hello all,

I have read the manual of CSS background-attachment and never get the true idea. However, today I learn a lesson as follows:

.#city-images-div {
    background: url(../img/100.jpg) no-repeat fixed 0px 0px;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 557px;
    height: 374px;
    cursor: pointer;
    border: none;
}

<div id="city-images-div"></div>

The above code will not help me display the background image 100.jpg.

If I change the background-attachment from fix to scroll then the picture can be display. The dimension of the image is of 557x374.

I don't know why the background-attachment plays such a role here.

Q1> What is the practical usage of background-attachment

Q2> Why the image doesn't show up if the value is fixed and displays correctly if the value is scroll.

thank you

// update //
this is a typo and fix should be fixed.

Answer 1

Have you tried using "fixed" instead of "fix"?

As for the practical usage of the background css properties, obviously the most important one is to add a background for an element (as the name suggests), without using an img tag. You can also use the background property to assist in creating custom classes for buttons, navigation elements, etc.

Answer 2

There's a few practical uses of it, but I can't think of any at the moment.

As for why it's not working for you, it should be fixed, not fix.

Answer 3

Probably because the value i snot fix but rather fixed.

Answer 4

I think that say you had a gradient background image (repeat-x and stuff) to make the page look nice.

If background-attachment is "fixed", then the gradient will scroll with that page, else, it stays at the top

Answer 5

I believe the problem is that the your Absolute Positioned box is being set some distance away from the top left corner of your screen, far away enough such that the image doesn't show in the box at all. See if this demo will help: http://jsfiddle.net/9LLwX/2/

Try dragging the box around. Notice that the position of the background never changes, even when the div containing it is moved. Backgrounds with background-attachment: fixed are positioned relative to the viewport.