Web Hosting, Design, & Coding forum

General discussion

how do u make web page background fit any screen resolution?

by codebandit / May 26, 2009 2:13 AM PDT

recently, I've been making a web page with a background image. The problem is, is that the image is too big and i need to scroll over to the right (meaning I'm assuming length is too big) where there's white space. Is there a way to get the web page background to fit any resolution. I tried google to look for the answers and most of them said something about setting a table width. Can someone also clarify what that is and how I can solve this problem?

Post a reply
Discussion is locked
You are posting a reply to: how do u make web page background fit any screen resolution?
The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to our CNET Forums policies for details. All submitted content is subject to our Terms of Use.
Track this discussion and email me when there are updates

If you're asking for technical help, please be sure to include all your system info, including operating system, model number, and any other specifics related to the problem. Also please exercise your best judgment when posting in the forums--revealing personal information such as your e-mail address, telephone number, and address is not recommended.

You are reporting the following post: how do u make web page background fit any screen resolution?
This post has been flagged and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.
Sorry, there was a problem flagging this post. Please try again now or at a later time.
If you believe this post is offensive or violates the CNET Forums' Usage policies, you can report it below (this will not automatically remove the post). Once reported, our moderators will be notified and the post will be reviewed.
Collapse -
Depending on what the background is
by Sovereign Forum moderator / May 26, 2009 1:39 PM PDT

you would go about it in different ways.

If the background was a pattern, you would assign it to the body and have it repeat x and y.

If the background is a fixed image (800x600), then you would probably want to center the image in the body. Having a picture that big is not recommended as it will take too long to load.

If you need a flexible background, I would create a background that can be easily repeated on the x-axis. That way it will extend as large as the screen resolution of the browser. Gradients work nice as repeating backgrounds.

Now, ideally, your page background/design is composed of several layers. You may have a repeating gradient in the background, but then some designs on top of that, and the actual page layout/design on top of that.

About your scrolling problem, my guess is that your image isn't in the background but simply included on the page.

Look here for more information: http://www.w3schools.com/css/css_background.asp

~Sovereign

Collapse -
how about this....?
by shamalz87 / January 14, 2010 3:03 PM PST

i hv working on a design using 1280 x 1024 resolution, the background design is fit to my view, but my colleague only seen half of the background image, there's no scrolling down, no repeat n no white space as mentioned by 1st person..... it seems like the page has been cut of from my colleague's view.... their using widescreen laptop's.... is there any suggestion..? hmm...

Collapse -
They may have
by Sovereign Forum moderator / January 14, 2010 10:19 PM PST
In reply to: how about this....?

a widescreen laptop, however if their resolution is lower than yours, the background will be cut off. The only way to remedy this is to make a smaller background image that fits his resolution and then have the Web site detect what resolution you are running and then show the appropriate background image / load the appropriate style sheet.

~Sovereign

Popular Forums
icon
Computer Help 47,885 discussions
icon
Computer Newbies 10,322 discussions
icon
iPhones, iPods, & iPads 3,188 discussions
icon
Security 30,333 discussions
icon
TVs & Home Theaters 20,177 discussions
icon
HDTV Picture Setting 1,932 discussions
icon
Phones 15,713 discussions
icon
Windows 7 6,210 discussions
icon
Networking & Wireless 14,510 discussions

Tech for the school year

Smart tech for smart students

Forget the pencils and notebooks. Gear up your students with these portable and powerful note-taking machines.