Understanding background-position

HTML & CSS
1

Center vs. center center

Why would one use one over the other, and do each serve a different purpose?

background-position: center;

vs.

background-position: center center;
https://www.w3schools.com/cssref/pr_background-position.asp

2

From the second link you posted:

If you only specify one keyword, the other value will be “center”

1 Like
3

Why would someone put:
background-position: center center;

Cause sometimes I see that.

4

Force of habit, probably. :winky:

coothead

2 Likes
5

I suppose you might also need to use it to override an earlier declaration - in media queries, for example.

2 Likes
6

Good thinking Batman!!! :biggrin:

coothead

3 Likes
7

Can you provide an example.

A code snippet?

8

You’ve already provided it I think. That’s it.

9

Which includes that too.

10

Why don’t you give it a go yourself, and ask questions when you get stuck. It should be well within your capabilities at this point.

11

Good to see you’re taking an interest in learning basics. Give this a read, look at the examples, and experiment.

Objective: To learn about the cascade and specificity, and how inheritance works in CSS.

4 Likes
12

I’m just asking for someone to show me an example of when center center; would be needed to specify.

13

And instead of obeying your “do it for me” request, we are asking you to noodle it…

to read more about the property and experiment with it on your PC by writing a “working page” with your text editor and seeing how a background image behaves. Google can locate tons of examples for you to play with.

Don’t bother with JSFiddle. Use a local file authored on your PC with your text editor and test it by opening it in your browser.

2 Likes
14

I’ve given you an example: when you need to override an earlier declaration.

If you don’t understand that, then you need to read the tutorial which @Mittineague linked to, because this is one of the most basic concepts of CSS and styles. Read that tutorial and play about with examples yourself until you’re sure you have at least a basic understanding of how the cascade and inheritance work.

3 Likes
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.