July 13, 201214 yr Hey all. New here, and really, just in need of a tiny bit of help. I'm building a website, and while I'm fine working in CSS and using Divs etal. in order to build it there's still one problem I can't seem to get a solution to. Basically, I want content in the middle of the website (obviously! ) and then a background image that fits whatever size resolution people are using. A good example would be this ; http://www.templatemonster.com/demo/38965.html As you can see, the wooden panel backgrounds fit any resolution without any horizontal scrolling. That's really what I'm looking for, and any help would be fantastic. Ta <3
July 13, 201214 yr You're best using a seamless image for the background... so will tile fully on any size. In your css, style the body using a background image, and make sure you style it with 'repeat'. background:url('image.jpg') repeat To have the content in the middle, in the css, style the main container div with margin: o auto , and it should center all the main content. Hope that is what you were looking for. Edited July 13, 201214 yr by Aceoko
July 13, 201214 yr If you code your background-image to the body style with top center it will stay centered in any resolution, but get cut off equally both sides. If you want it to fit the width of any resolution you can use background-size: cover; as these tutorials http://www.standardista.com/css3/css3-background-properties/ http://www.w3.org/TR/css3-background/#the-background-size but that will only work in modern browsers that support the new CSS3 property. It may be better to use position: fixed; left: 0; right: 0; z-index: -1; to tie the image to both sides of the window (no height so that the height remains proportional) and this image would be a img src image the first item in the body section, not a background-image. This will work in older browsers. See http://www.wickham43.net/backgroundfullwidthflexible.html Then code a page wrapper with position: relative; width:??px; margin: 0 auto; and the page wrapper will show in the middle of a larger window with equal margins both sides.
July 13, 201214 yr Author Thanks for the help guys, I'll give it a go later tonight. I should say that I'm specifically doing this for a non-tiled background though. Cheers!
Create an account or sign in to comment