Dear experts,

 

I would like to know how to put another image at the header.

 

At my header, I have already an image with a background in light green color and then follow by a tag line.

 

Now, I would like to place another image right across the header.

 

Hope someone can advise me how to write the css part.

 

I tried using <img position: right src="image" width="3000" height="120"> but it doesn't work, either it sits below my logo in the header or it covers my tag line, just won't go to the right corner of the header...

 

my css for my header as follows:-

 

#header{

height:110px;

margin:1px 0 10px 0;

padding:5px;

background : #C0FF3E;}

 

#header h1{

margin: 3px;

padding:0 0 0 2px;

color:#790301;

font-size:30px;}

 

#header h2{

margin: 0;

padding: 0 0 25px 45px;

color: maroon;

font-size:23px;

font-weight: bold;}

 

<div id="wrapper">

<div id="header">

<h1>

<img src="HI8.PNG"></img>

</h1>

<h2>

tag line

</h2>

If you want a background image right across the header, add the url to the background style:-

#header{ 
height:110px;
margin:1px 0 10px 0;
padding:5px;
background : #C0FF3E url(header.jpg);}

 

It will repeat vertically and horizontally if the image is smaller than the header div.

 

The HI8.PNG image in h1 will show on top of the background image.

 

If you want it only in the right corner, position it:-

#header{ 
height:110px;
margin:1px 0 10px 0;
padding:5px;
background : #C0FF3E url(header.jpg) top right no-repeat;}

If you want a background image right across the header, add the url to the background style:-

#header{ 
height:110px;
margin:1px 0 10px 0;
padding:5px;
background : #C0FF3E url(header.jpg);}

 

It will repeat vertically and horizontally if the image is smaller than the header div.

 

The HI8.PNG image in h1 will show on top of the background image.

 

If you want it only in the right corner, position it:-

#header{ 
height:110px;
margin:1px 0 10px 0;
padding:5px;
background : #C0FF3E url(header.jpg) top right no-repeat;}

 

It works Thanks.

 

But how to make it stretch a little because now it sort of constraints by this ccs code at the right column :

 

#right-column {

float:left;

width:285px;

padding:0;

}

 

The image width is bigger than 285px but it just stops at the same width as the right column width.

You haven't given all your code so I can't test my replies.

 

I assumed that the header div wasn't inside the right-column div so that the header would be wider, possibly 100%.

 

Try putting the wide background image in the body style:-

body { background : #C0FF3E url(header.jpg) no-repeat;}

 

or in the #wrapper style.

You haven't given all your code so I can't test my replies.

 

I assumed that the header div wasn't inside the right-column div so that the header would be wider, possibly 100%.

 

Try putting the wide background image in the body style:-

body { background : #C0FF3E url(header.jpg) no-repeat;}

 

or in the #wrapper style.

 

It works now...thanks for your help....just that the picture just don't show up the whole picture....after I rescale it from the original image which is many times larger ....any idea how I can show the image just like the original image? (not sure if I have to re-post this query since it's about the image....)