CODEWITHSUNDEEP
htmlcss
Stiff Mittens
Stiff Mittens

Reputation: 71

CSS repeating background fixed in relation to centered html content?

My webpage has content that is contained in a box of fixed size that is always centered, and a repeating background image filling the rest of the viewport. I would like the repeating background to maintain it's relationship to the content box no matter how I resize the browser window. Can this be done with CSS only?

Upvotes: 2

Views: 63

Answers (2)

Andrew
Andrew

Reputation: 20081

Yea, set the background-position to center:

background-image: url(http://rturngames.com/images/plethora_bkgnd.png);
background-repeat:repeat;
background-position:center;

http://jsfiddle.net/5kmb2/2/

Upvotes: 1

Ming
Ming

Reputation: 4588

If you use background-position you can fix the background to a particular spot, in this case, horizontally centered as your #main-wrap is.

http://jsfiddle.net/5kmb2/1/

body {
    margin: 0px;
    padding: 0px;
    background-image: url(http://rturngames.com/images/plethora_bkgnd.png);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: 50% 0; /* NEW LINE */
}

Upvotes: 2

Related Questions