Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Web page resolution

Status
Not open for further replies.

limejudo

Technical User
Aug 4, 2004
110
US
I just started using photoshop, so I'm extremely new.
I created a background for a webpage (1024x768)
I set the resolution when I did a "save for web". The image is to big when I display it in front page preview. To small when I set it for 800x600 (tiled almost) what resolution should I set it at?

thanks. eric



Eric - A+, Net+, INet+ CCNA next week.
Network Admin/Helpdesk II
 
Make the width 770. Place this inside your <head> tags to display the background:

Code:
<style type="text/css">
body{
  background-image:url('theimageurl.jpg');
  background-repeat:no-repeat;
}
</style>

Of course, it would be better if you had a small background that could tile to fill the area so that it would load faster, but this is how you do what it sounds like you want to do.

Rick

 
You may need to rethink what you are doing as a webpage does not necessarily have a fixed resolution.

Imagine all the different people who will view the page. They will all have slightly different screen resolutions.
Some my have 800x600, some 1024x768.
On top of that there is no guarantee that they will be viewing full screen (it's doubtful they will). So how big will their browser window be? You can't tell.
Consequently you will either need to design something that can tile or create a page with a fixed width (and height if desired though I would advise against this). That is the only way you can know how big to make your background.

Personally I try to design so that the window size/resolution doesn't matter as the document will adapt and work no matter how the user is set up.



- Web design and ranting
- Day of Defeat gaming community
"I'm making time
 
When you design so size/reso doesnt' matter..What do you mean or what do you use? I've been reading on slicing in adobe, but I don't know if this will work..

Eric - A+, Net+, INet+ CCNA next week.
Network Admin/Helpdesk II
 
Slicing is just a way to split a large image up into smaller chunks. These chunks are then stuck together using a table or CSS layout.

I meant that I design pages/sites so that I don't need to worry about images filling a background. Not the design of the image, but the layout/concept/whatever itself.

I tend not to use big background images. About the closest I can show you at the moment is my own site at The "background" is a thin, 700px wide strip of white with orange bits and some shading at each end.
This is then set to tile vertically and be centered within the browser width. The content of the page is restricted to less than 700 pixels and sits in the "white bit" of this background.
This means that no matter what is on the page, the background will tile downwards to accomodate it.

Probably not the sort of thing you had in mind though I guess.


- Web design and ranting
- Day of Defeat gaming community
"I'm making time
 
a table with the code

Code:
<table width='size'>
     <tr>
          <td>

you can use either a number or a percentage for the size of the table.

I typically set my page inside of this table. you can set it to be as big as you wnat. I typically set it to be 770. I also center my page and give th body a solid color.
 
I get it now. I played around this weekend and was able to tweek a few things. Cow I like your site. Thanks you to dagger.... Thanks guys

Eric - A+, Net+, INet+ CCNA next week.
Network Admin/Helpdesk II
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top