Solved

How repeat a 1 pixel image across a web page?

Posted on 2004-08-13
5
258 Views
Last Modified: 2013-12-24
This may be a little difficult to explain but here goes...

I have a company logo which is in the left hand side of a banner frame.  Next to that image file, I have a 1 pixel wide x 80 pixel tall jpg image.  This 1 pixel image needs to repeat itself so it fills the width of any user's display no matter what resolution their monitor is set at.

How can I do this?

--Steve
0
Comment
Question by:SteveL13
  • 2
  • 2
5 Comments
 
LVL 3

Expert Comment

by:kay2g
ID: 11796265
why don't you just create a table with 100% width, create a row and a cell, make that 100%, and make that the background. For example:

<table width="100%">
 <tr>
  <td background="yourcompanylogo.gif" width = "100%">&nbsp;</td>
 </tr>
</table>

Hope this helps
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11796281
I would recommend against using tables for this, much easier to handle with CSS.
If you post a link to your page or code, I can give you an example...

Thanks,
Sean
0
 

Author Comment

by:SteveL13
ID: 11796692
To both who have replied so far:

Here is the code.  So far, the problem is that the logo file appears just fine, but then the "repeating" jpg is appearing on the next line.  All of it has to be on the same line.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

<p><img border="0" src="logofile.jpg" width="800" height="80"></p>

<table width="100%" height="80">
 <tr>
  <td background="bannerrepeat.jpg" width = "100%" height="79">&nbsp;</td>
 </tr>
</table>


</body>

</html>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11797062
Well, assuming the logo completely covers the banner, I would handle it like this:

<html>
<head>
<style type="text/css">

#banner
{
    background: url (bannerrepeat.jpg) repeat-x;
}

</style>
</head>

<body>
<div id="banner"><img border="0" src="logofile.jpg" width="800" height="80"></div>
0
 
LVL 3

Accepted Solution

by:
kay2g earned 125 total points
ID: 11810075
you could try this:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>
<table width="100%" height="80">
 <tr>
  <td> <img border="0" src="logofile.jpg" width="80" height="80"> </td>
  <td background="bannerrepeat.jpg" width = "100%" height="79">&nbsp;</td>
 </tr>
</table>

</body>
</html>
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Can I access internet from laptop via my cell phone? 8 215
Magento as industry internet resource portal? 6 45
About Wordpress website 3 107
What xml editor to use. 8 90
Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

772 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