CODEWITHSUNDEEP
javascripthtmlcsspositionbackground-image
Ikenna
Ikenna

Reputation: 33

Image background-position in CSS

I am currently going through a website's banner via chrome developer tools(Inspect). I noticed that a particular banner has the following ruleset in its CSS:

 banner{ 
     background-position:bottom;
     background-position-x: center;
     background-position-y: center;
  }

Is this just a formality?. Because, when I removed the three background properties and set background-position: center, the banner wasn't affected in any way.

From a developer wannabe. Thanks

Upvotes: 0

Views: 63

Answers (1)

LSE
LSE

Reputation: 1358

That banner just has bad CSS.
background-position is a shorthand for, background-position-x and background-position-y.

So,

banner { 
  background-position: bottom;
  background-position-x: center; /* This is not doing anything, because x became 'center' when it was omitted above. */
  background-position-y: center; /* This will override the previously set 'bottom' */
}

As you mentioned, background-position: center does the same job, since both x and y will be 'center'.

There's nothing wrong with using keywords, but if you're just starting with CSS, I strongly recommend you to get used to using percentages.
(You'll thank me later when you need more specific positioning using calc().

background: 0% 100% = background: left bottom
background: 100% 0% = background: right top
background: 50% 50% = background: center center

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Upvotes: 1

Related Questions