Solved

Size of a web page in pixels

Posted on 2008-10-14
6
723 Views
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.  
0
Comment
Question by:blerman456
  • 3
  • 3
6 Comments
 
LVL 13

Expert Comment

by:brundo
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 :-)) ).

0
 

Author Comment

by:blerman456
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.
Doc1.doc
0
 
LVL 13

Expert Comment

by:brundo
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 dialogs > Patterns
  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...

example.png
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:blerman456
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?
0
 
LVL 13

Accepted Solution

by:
brundo earned 500 total points
ID: 22724420
Well, without fine tuning it would be...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
 

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>Table</title>

	<!-- td style for testing purposes only -->

	<style type="text/css"> 

	  td { 

	   border: 1px solid black

	  }

	</style>

</head>
 

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

	<table cellpadding="0" cellspacing="0" style="border-collapse: collapse; height: 100%;" width="100%">

		<tr>

			<td width="110" align="center" valign="top">

				<img border="0" src="lady.gif" width="97" height="92" alt="lady">

			</td>

			<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>

			<td width="110" valign="top">

				<img border="0" src="computers.gif" width="103" height="89" alt="2computers">

			</td>

		</tr>

		<tr>

			<td colspan="3" height="100"align="center" valign="middle">

				Let's ready to create...

			</td>

		</tr>

	</table>
 

</body>
 

</html>

Open in new window

0
 

Author Closing Comment

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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

This article provides the solution to a question (http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/Q_28674207.html) posed here at Experts Exchange. The asker of the question has many JPG images in many folders, and all of t…
In a previously published article (http://www.experts-exchange.com/articles/10331/Automatic-Duplex-Scanning-in-PaperPort-Versions-11-12-14.html) here at Experts Exchange, I explained how to achieve duplex (double-sided) scanning in Nuance's PaperPor…
The goal of the tutorial is to teach the user how to add a water mark to there photo. Once you have a photo you like you have to go into the water mark setting and add a water mark to the image. You can either choose a text watermark or an image…
The goal of the tutorial is to teach the user what exposure is and how to use the exposure slider. Analyze the photo that you want to edit, then adjust the exposure slider to your liking.

759 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now