CODEWITHSUNDEEP
cssbackgroundresponsive-designoffsetfluid-layout
Kiruse
Kiruse

Reputation: 1733

Why does it work: background-position: top right -200px

I'm trying to use a single image as background in a fluid layout / responsive design to create a fake sidebar column.

Although the code in the title works just fine in Chrome (other browsers yet untested), I don't understand why. The W3Schools do not document a use of 3 "parameters". (A German site served as reference at first, but I needed an English reference for this question. That's the first I came up with.)

I'm fine with the code working as long as it is cross-browser. I was going to test browser compatibility only once I'm satisfied with the design in Chrome.

However, when I tried to employ something like:

background-position: -200px right -200px;

and tried different variations, it just failed.

Question: I couldn't find any documentation on this markup in the first place... could this be a bug or is there a valid explanation? If it is valid, could somebody explain to me how I could go about this properly?

Upvotes: 0

Views: 297

Answers (1)

Alfred Xing
Alfred Xing

Reputation: 4632

Accoding to MDN, background-position takes in a position value, which can take in up to 4 values.

In your case, it should be equivalent to background-position: top -200px right -200px, which is a background image with position (-200, -200) at the top right corner of the element.

Edit: As @Dvir mentioned in the comments, W3C is the actual specification that you can look at as well. I prefer MDN because it's more user-friendly while still being accurate and detailed.

Upvotes: 1

Related Questions