tags:

views:

42

answers:

5

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.
+1  A: 

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.

Blakomen
tried, it doesn't work for me.
q0987
+2  A: 

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.

icktoofay
fixed doesn't work for me.
q0987
+1  A: 

Probably because the value i snot fix but rather fixed.

prodigitalson
+1  A: 

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

Mark
I tried different kinds of pictures, it just doesn't work for me. thank you
q0987
+1  A: 

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.

Yi Jiang
Hello Yi, 1> As you can see my code, the offset should be reasonable so that the distance should not cause the problem. 2> while I move the box it seems that I can different part of the background. I think I didn't follow your comments. thank you
q0987
@q0987 Yes, that's what you should see. When using `fixed`, image is positioned relative to the screen. That means that instead of representing the distance from the top left corner of the element, whatever values you set for `background-position` represent the distance away from the top left corner of the **screen**. Other than that I don't think I can provide any help. As you can see in the demo, the code works perfectly fine.
Yi Jiang