CODEWITHSUNDEEP
css
J82
J82

Reputation: 8457

Keep an image centered regardless of screen size?

Here's a fiddle I created. I want the decorative ornament to always stay in the middle of the screen. I can't figure out how to do it. I tried wrapping it up in a div but that didn't work either.

HTML

<span class="border-top"></span>

CSS

.border-top {
background: url("http://i.imgur.com/Txoi4sd.png") no-repeat;
clear: both;
display: block;
height: 47px;
margin-bottom: 50px;
width: 100%;
}

Upvotes: 1

Views: 889

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

.border-top {
    background: url("http://i.imgur.com/Txoi4sd.png") center center no-repeat;
    clear: both;
    display: block;
    height: 47px;
    margin-bottom: 50px;
    width: 100%;
}
<span class="border-top"></span>

This will probably do the trick.

Reference: http://www.w3.org/TR/css3-background/#the-background

Upvotes: 1

rupps
rupps

Reputation: 9887

what about http://jsfiddle.net/wkkrnqqx/1/

.border-top {
    background: url("http://i.imgur.com/Txoi4sd.png") no-repeat;
    display: block;
    height: 47px;
    margin-bottom: 50px;
    width: 100%;
    background-position:50% 0;
}

Upvotes: 1

Related Questions