Render an image at the top and bottom of the page

swaroop · Jan 25, 2005

Hi All,

I need a way I can render 2 images at the left corner of the page and a blue background as shown below.

___________________________________________________________
| | |
| | |
| | Background |
| Image | |
| _____|_____________________ |
| | | |
| | | |
| | Image2 | |
|___|_____________________________|_____________________|

Please suggest the HTML script.

Vragabond · Jan 25, 2005

From the graphic, it looks like your bottom image (Image2) will be overlapping the left. The easiest and most compatible way to do this is using backgrounds.

Code:

<style type="text/css">
body {
  background: blue url(leftGraphic.jpg) top left no-repeat;
}

body img#bottom {
 /* style it here if you want it at a certain position -- however it is recommended for it to float right under the text */
}
</style>

<body>
 <img id="bottom" src="Image2.jpg" alt="" width="300" height="100" />
</body>

With correct positioning this could work for you. However, it is hard to say if it is the best solution, provided scarce info we got.

cLFlaVA · Jan 25, 2005

that is a beautifully rendered image, though, i must say.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]

swaroop · Jan 25, 2005

Thanks for the advice Vragabond.

I am looking the sane as header, not entire body. I need 75% space in header and footer. The rendering shone above must be the header 2" in hight and width across the browser.

Regards

JamesLean · Jan 26, 2005

I'm not sure I quite understand the result you're after. If possible, can you do a mock-up of the finished result (in Photoshop or even Paint), upload it to a site somewhere (if you have one) and post the link here.

Alternatively, re-post your "image" above but surround it in [ignore]

Code:

...

[/ignore] tags:

Code:

|-----------------------------------------|
|          |                              |
| Image 1  |                              |
|          |                              |
|----------|       Background             |
|          |                              |
| Image 2  |                              |
|          |                              |
|-----------------------------------------|

--James

swaroop · Jan 26, 2005

Thanks for your clear image JamesLean,

I am working and lot of tables in it. The picture shown by you is grate an it must be the header in the page. and image2 must overlap on image1 and extend in background.

I'll complete the code and send it to you.

Regards,

pgaec · Jan 26, 2005

Code:

<style>
#header{
	height:200px;
	width: 100%;
	background-repeat:repeat-x;
	background-color: #002478;		
}

#header img{
    height:100px;
    width: 150px; 
}
</style>

<body>
<div id="header">
  <table width=150 height=200>
        <tr>
           <td><img src="1.gif"></td>
        </tr>
        <tr>
           <td><img src="2.gif"></td>
        </tr>
  </table>  
</div>

should do the trick (I think).

Vragabond · Jan 27, 2005

Your code looks pretty simple:

Code:

<style>
#header {
    height: 200px;
    width: 100%;
    background-color: #002478;        
}

#header img {
    height: 100px;
    width: 150px;
    display: block;
    margin: 0;
    padding: 0;
}
</style>

<body>
<div id="header">
  <img src="1.gif" alt="" />
  <img src="2.gif" alt="" />
</div>

This should produce the same as your code.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Render an image at the top and bottom of the page

swaroop

Programmer

Vragabond

Programmer

cLFlaVA

Programmer

swaroop

Programmer

JamesLean

Programmer

swaroop

Programmer

pgaec

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor