100% background layout?


Hi, I’ve been searching online and there’s many codes for setting a background to 100% but none seem to really work.

What I mean by 100% is that some people may have different resolutions, and a 1024x768 may leave blank spots for a person who has a 1280x1024 screen. I know there’s a script for it, but I’m unsure which one works the best and I’m also unsure of where to put the script.

I would really appreciate the help as my friend is currently helping me design a background but has no idea either.

Please and thank you.

P.S. I’m using Wordpress


You mean a repeating background? In CSS, it repeats by default. If properly designed, you won’t see the seams.



Interesting question … if you’re asking what I think you might be asking, which is how to have a single JPG image fill up the whole background with no borders and automatically adjusting to the browser’s window size;

there’s a possible way of doing something like this at

If anyone can suggest a better way, please do! (As you can see, this way of doing it stops working properly when the browser’s window becomes very tall and narrow.)


Exactly what I’m asking :slight_smile: But yeah, I still can’t figure out a script to fill every viewer’s page, because as I tested with friends with bigger resolutions than me, they say it does not fill their screen. I don’t mind if the image is stretched as long as it fills their screen.


You could specify both width:100% and height:100% on the background image, although that will make it get stretched out of proportion.


Which template would it be in? Or is it in the style sheet? I’m unsure where to make the change in the sheet o.o


I actually have a new approach, but not sure if this is possible.

This is my current page, and you can’t see, but it’s not adjusted as my friend would like it to be. (my resolution: 1024x768)

This is what I’m trying to aim for (my friend’s screenshot, current resolution:1280x720)

I don’t know if it’s possible to have this adjusted somehow in the script where everyone sees how my friend sees it, but if it is possible, I would REALLY appreciate it. I’ve been trying to figure this thing for a while now.



It looks like what you want is a forced left margin so it holds that portion of the image. In that case, you can use CSS to add a Left Margin for the content portion of your site.


As I look at your site right now, there’s a black background for the entire body, and your image is a background for a sub-element of your site. Your image should be be the background for “body” with its position set to “left top” (or 0 0).[hr]
And as I look more, maybe they’re both part of “body”. Background color should be white so it fills in to the right and bottom. And I’d turn off the “fixed” background attachment so the image frames your content as you scroll. Just make it taller (add more of the design down the left) which shouldn’t greatly increase the size of your file. Your image should also be just wide enough for the design, and let the white background color naturally fill out the rest of the right side.


I find it too hard to adjust it accordingly for a beginner like myself, so I’m going to throw the whole background concept away. I was wondering if anyone could teach me how to adjust a single image (fixed) so it’s at 100%. I tried browsing through the tutorials in sdayman’s link but I’m still unsure which it is.

I tried asking for support from the dreamhost staff, but they said it’s an estimate $80/hour which is way too pricey for me.

It’s been about 4 days now that I’ve been trying to fix this problem, which I find kind of sad, lol.