Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Size of a web page in pixels

Posted on 2008-10-14
Medium Priority
Last Modified: 2013-12-02
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.  
Question by:blerman456
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
LVL 13

Expert Comment

ID: 22718187
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 :-)) ).


Author Comment

ID: 22719465
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.
LVL 13

Expert Comment

ID: 22723478
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...

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.


Author Comment

ID: 22724114
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?
LVL 13

Accepted Solution

brundo earned 2000 total points
ID: 22724420
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


Author Closing Comment

ID: 31506110
If I could, I would award the person 1000 points.  This has helped me so much.  

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In a previously published article ( here at Experts Exchange, I explained how to achieve duplex (double-sided) scanning in Nuance's PaperPor…
PaperPort 14.5 Patch 1 update is often not detected or downloaded automatically. This article provides direct download links to solve the problem for retail (non-bundled) versions of the Standard and Professional editions, as well as the Professiona…
The goal of the tutorial is to teach the user how to import photos into Adobe Lightroom efficiently and to keep everything organized.
In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question