• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 738
  • Last Modified:

Size of a web page in pixels

Can you tell me what size in pixels I should create a background file in gimp?  I will bring it into Kompozer and save it as an html file.  I want the background to fill in width the entire web page.  
  • 3
  • 3
1 Solution
First of all, image cannot be saved as a HTML file. You can save the image, and then define:

   <body style="background-image: url('picture.png')">

(or 'another_picture.gif', 'some_folder/third_picture.jpg', or another combination). You said, you want to fill the entire page, i.e. repeat the image in both directions. So you need no additional attributes in the style tag.

In GIMP you can create image of any size: File > New > type in size in pixels.

The smallest sizes which works for background are:
  • 1x2, 2x1 (e.g. one pixel green, one white - for thinny stripes) and
  • 2x2 (e.g. two pixels on a diagonal green, two on another diagonal white - for checkerboard).
The biggest sizes depend on what you want.

It is not good to have too big background image because:
  • it doesn't look good when a large picture is repeated (think of users with different monitors, especially small, e.g.,1024x768)
  • big pictures have longer transfer time, and it lasts longer until they appear (think of users connected via "old" modems or GPRS).
If you like a background image on a page, you can right click on that background in Firefox and choose View Background Image. After that you can see its dimensions, save it... and make you image of similar dimensions :-))

If I didn't answer your question, could you sketch us what you want and attach the image (you can sketch by hand, too, and send a photo :-)) ).

blerman456Author Commented:
Thank you for your great response.  I was wondering why my image came out twice in the background sometimes, so I made the image big.  But it isn't covering the entire web page.  There is a border around it in Kompozer.  I am attaching a screen printout for you to see.  I am not sure why the pixels says 1209 px width  at top and 846 px height.  I think the background is bigger that 1209 px width in reality.
In your case I would make a background of the Ice pattern in GIMP, then make a table, and put two little images and text in the table cells. Otherwise the background picture can be too large (in KB; transmission will last to long), page content could overwrite your text "Let' s ready...." and you will have to avoid spreading the text over little images.

It can be done with div elements, without tables, but this is a bit more complicated.

First, make background in GIMP (instructions for GIMP 2.6):
  1. Window > Dockable dialogsPatterns
  2. right click on Ice pattern > Open pattern as image
  3. save the image as background.png (why PNG? because color will be not lost like in GIF format...)
(as you like Ice pattern, this is not making background , but getting the background from GIMP)

Define background of the page:
  1. <body style="background-image: url('background.png')">
Test your page. Do you see the background filling the whole window :-)) ?

Define table:
  1. Make a table with 3 columns and 2 rows.
  2. Define the width of the table 100%, with no border
    (probably also: no spacing, no padding, height 100%)
  3. Select the lower three cells and merge them.
  4. Type in the text in the new, big, lower cell.
  5. Define in cell properties vertical and horizontal align to center, height to, e.g., 100px.
  6. Insert image with lady in the left upper cell.
  7. Define the width of this cell e.g. to 110px, horizontal align e.g. to center, vertical to top.
  8. Insert image with two computers in the upper right cell.
  9. Define the width of this cell e.g. to 110px, horizontal align e.g. to center, vertical to top.
And then write your content in the upper middle cell.

Look at the example...

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

blerman456Author Commented:
I love how your example looks.  I will try it.  Can you see the .html of this file?  Can you send it to me , if possible?
Well, without fine tuning it would be...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!-- td style for testing purposes only -->
	<style type="text/css"> 
	  td { 
	   border: 1px solid black
<body style="background-image: url('ice.png')">
	<table cellpadding="0" cellspacing="0" style="border-collapse: collapse; height: 100%;" width="100%">
			<td width="110" align="center" valign="top">
				<img border="0" src="lady.gif" width="97" height="92" alt="lady">
			<td valign="top">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc at ante. Pellentesque rutrum suscipit nulla. 
				Praesent aliquet erat sed nibh. Vestibulum ac massa in mi lobortis molestie. Nullam est risus, placerat sed, 
				mattis sit amet, suscipit sed, nulla. Mauris tortor metus, porttitor nec, dignissim sed, ullamcorper et, 
				nibh. Quisque in lorem nec arcu dictum pellentesque. Nulla facilisi. Vestibulum ante ipsum primis in 
				faucibus orci luctus et ultrices posuere cubilia Curae; Ut orci. Integer odio. Nam vel massa. Etiam placerat 
				pede at mauris. Suspendisse potenti. Proin vel nisi. Phasellus magna.<p>Aliquam risus. Lorem ipsum dolor sit 
				amet, consectetuer adipiscing elit. Proin sed arcu. Proin dictum nisi a eros. Vestibulum mauris. Suspendisse 
				potenti. Suspendisse eget felis. Curabitur tristique urna consectetuer purus. Vivamus iaculis. Nulla a est 
				ut lorem pretium euismod. Aenean sit amet dolor mattis lectus venenatis suscipit. Duis dignissim, mauris nec 
				consequat luctus, velit justo elementum augue, et dapibus sapien libero non ligula. Phasellus ornare nibh a 
				nisl. Nulla volutpat sem id nisl imperdiet ornare. Donec in magna vitae diam semper elementum. Class aptent 
				taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean accumsan imperdiet 
				neque. Nulla fermentum, urna nec tincidunt pellentesque, lectus enim facilisis ipsum, vitae condimentum 
				massa leo id arcu.</p>
				<p>Integer lobortis. Integer a augue sit amet lectus tincidunt convallis. Sed et ligula. Pellentesque 
				venenatis eleifend lorem. Ut purus. Phasellus suscipit dolor at libero. Donec ac nunc. Nulla vehicula. Morbi 
				lacus enim, sollicitudin eu, tristique in, aliquam nec, augue. Donec aliquam. Mauris egestas pharetra ipsum. 
				Sed ipsum sapien, viverra aliquam, eleifend quis, tristique ac, ante.</p>
			<td width="110" valign="top">
				<img border="0" src="computers.gif" width="103" height="89" alt="2computers">
			<td colspan="3" height="100"align="center" valign="middle">
				Let's ready to create...

Open in new window

blerman456Author Commented:
If I could, I would award the person 1000 points.  This has helped me so much.  
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now