CSS Background-Position Not Working?

Question

I have the below code and I'm trying to add an attribute to center the background but it's not working.

Existing Code:

<div class="av-section-color-overlay" style="opacity: 1; background-color: #000000; background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg); background-repeat: repeat;"></div>

Existing CSS:

opacity: 1;
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: repeat;
}

The CSS I tried to add is:

.av-section-color-overlay {
 background-position: center center !important;
  }

The website is http://andytraph.com/ and I'm trying to center the full-screen Avatar image

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. Read [ask] — Amit, Oct 26 '15 at 23:03
@squidg ok, its not clear now what you want, since you are referencing av-section-color-overlay div, but not its parent. Since your setting the background position on it, you need to be aware what your positioning it inside of. Lets take a closer look at its parent div. Please include more details. — blamb, Oct 26 '15 at 23:05
Apologies, I have now added the website that contains the background image I'm trying to center. — squidg, Oct 26 '15 at 23:10
I tried setting `background-repeat: no-repeat; background-position: center center;`and the result looked fine. I think you want `no-repeat`, right? — trincot, Oct 26 '15 at 23:21

score 2 · Answer 1 · answered Oct 26 '15 at 23:31

I would suggest not repeating the background, but letter-boxing it in the container, which looks way better. Center works:

{
opacity: 1;
background-color: #000000;
background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

user3816 · Accepted Answer · 2015-10-26T23:49:09.717

There are a few competing problems here:

There is no content inside the element you are working with, so the background image is getting clipped as a result.
The background image is very large, so it is difficult to see the desired centering without either 1) setting the DIV element to a relatively larger height / width, or setting the background-size CSS property.
The concepts of background-repeat: repeat and background-position: center constitute competing desires. You can't really both center an image, and tile it indefinitely in both directions.

So in light of the above, if you apply a few further style modifications, you get your desired behavior with what you specified: background-position: center. (If you want to center in both directions, you don't need to expressly state it twice -- it is implied that you want to use it in both directions if there is only a single value.)

Something like:

.av-section-color-overlay {
    background-color: #000;
    background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: center;
    height: 200px;
    width: 200px;
}

and:

<div class="av-section-color-overlay"></div>

Example: https://jsfiddle.net/7mpqfd22/2/

Many thanks for the information. I have tried to add your code as an example but it seems that the CSS is being over-written as nothing is changing? I've added !important on every line as well. Any ideas? — squidg, Oct 26 '15 at 23:29
@squidg, can you put your HTML into a JSFiddle? The link I included above should work, so if you follow that exactly, any other issues should be an interaction with your other existing styles. Typically, you'll want to avoid using `!important` whenever possible, as that keyword explicitly overrides the normal rules for CSS selectors, which can make troubleshooting issues difficult. — user3816, Oct 26 '15 at 23:47

CSS Background-Position Not Working?

2 Answers2