Solved

How repeat a 1 pixel image across a web page?

Posted on 2004-08-13
5
261 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
[X]
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
  • 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
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 automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
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…

730 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