CODEWITHSUNDEEP
css
q0987
q0987

Reputation: 35982

CSS - Usage of background-attachment

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.

Upvotes: 3

Views: 322

Answers (5)

Yi Jiang
Yi Jiang

Reputation: 50095

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.

Upvotes: 1

Mark Lalor
Mark Lalor

Reputation: 7887

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

Upvotes: 2

prodigitalson
prodigitalson

Reputation: 60413

Probably because the value i snot fix but rather fixed.

Upvotes: 1

icktoofay
icktoofay

Reputation: 129001

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.

Upvotes: 2

Henry C
Henry C

Reputation: 4801

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.

Upvotes: 1

Related Questions