CODEWITHSUNDEEP
jqueryhtmlcss
Tom
Tom

Reputation: 1068

How do you centre a background image div?

I'm looking at http://www.hideoutfestival.com/

When you resize your screen, the header background image is continually centered.

I can't seem to replicate this effect.

I have:

<div id="cover" style="background:url(/design/cover.jpg) repeat-x top">
</div>

And

#cover {
    height:450px;
    width:100%;
background-position: center;
}

Yet I can't seem to have the same effect as they do.

Any help?

Regards, Tom

Upvotes: 1

Views: 64

Answers (2)

Bill
Bill

Reputation: 3517

I think that the background-position in your inline styles is possibly overriding your CSS. Try using background-image: url(/design/cover.jpg); inline and using this CSS:

#cover {
    height:450px;
    width:100%;
    background-repeat: x
    background-position: center top;
}

Or putting the whole thing into your style sheet is a better idea, but I'm assuming you have a reason for putting it inline. If you do decide to do that, this should work:

#cover {
    height:450px;
    width:100%;
    background-repeat: url(/design/cover.jpg) repeat-x center top;
}

Upvotes: 1

Christian
Christian

Reputation: 19750

Inline CSS overrides external CSS. Any background properties set in the CSS are overridden by your inline rule.

Either change it so the background is positioned inline:

background:url(/design/cover.jpg) repeat-x center center;

Or change it so that just the image is defined on the element:

background-image:url(/design/cover.jpg);

Or move it to your stylesheet (which you really should do).

Upvotes: 3

Related Questions