Stretching header image

[adpk77]

could anyone here let me know how to display a header image as background without cutting the image? the image must display properly on any screen resolution. My screen resolution is 1410px by 900px. so the image dimensions are 1410px by 199px. It displays fine but if the same header image is viewed on lower resolutions, the image is getting cut off from the right and bottom. How could i display the image in full?
it is the header id i have been trying to edit but no luck.

#header {
/*header image is 1410px W by 199px H*/

background-image:url(images/header.jpg);
background-repeat:no-repeat;
background-position:center;
font-family: Verdana, Helvetica, sans-serif;
background-color: #1b99ea;
border-bottom: 1px solid #6797CF;
height: 12em;
overflow: hidden;
}
this is for a drupal site.

 

[BillyRayPreachersSon]

If you want your image to be 100% width & height, then you will have to do it without a background image.

Make it an IMG element, absolutely-positioned, and with a width & height of 100%.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[adpk77]

still confused.
you said "If you want your image to be 100% width & height, then you will have to do it without a background image.

 

[audiopro]

As the container gets smaller, less of the background is visible. As the cell gets bigger, the background image repeats. Only putting the actual image in the container will keep it the same size.

Keith

http://www.studiosoft.co.uk

 

[adpk77]

This is the url. please help. I have given up spending almost whole day in trying to fix this.

 

[adpk77]

forgot to post url so url is

http://eblu.in/

 

[vacunita]

What he means is that having your image as the background will not let you modify its dimensions. Think of it as a window, and your background is what's outside the window, If the window is smaller than what's outside you can't see it all because parts get behind walls and ceiling.

Make your background part of the window by sticking it in an absolutely positioned <img> tag. that sits behind the rest of the header content, and set its width and height to 100%.

<div id="header">
<h1>this  is the header contents</h1>
<img id="hdrbg" src="background.jpg">
</div>

Then in the CSS:

#header{
position:relative;
...
}

#hdrbg{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:-1;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[vacunita]

Ohh I just saw you are using a table, in which case its not going to work.

Its very poor web design, and as such the technique won't actually work, because the image is not inside the table but inside on of the cells, which means it won;t take uop the space of the table, but only that of the cell its in.

If you can do away with the table in the header and use just DIV's instead then it will work.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[adpk77]

just one query regd the css, why is the header id relative?

Regd the table, everything is in php.
Below is the table code by going to that link.

http://pastebin.com/m2bcf8d36

 

[vacunita]

So that the absolutely positioned img is kept inside the header.

If you remove the position:relative, then the img does not use its parent dimensions as a basis. It becomes a stand alone element, and uses the window dimensions to adjust itself.

As for PHP, its a somewhat poor design to use tables to output anything that's not tabular data. You can still use the PHP code to output whatever you need, just don't use tables as your html layout for it. Use DIV's and whatever else you need.








----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

I think we still need to determine what you want. Would you like to:

1. Have the image the same size and have scrollbars on screens that cannot accommodate the image on one screen?

2. Have the image size change according to the screen resolution (browser size) the client is using?

With #1, the solution is simple, you would just restrict the size of the parent container with fixed width and height (either using width/height or min-width/min-height in modern browsers).

With #2, you should follow the solutions given to you previously. You could even put it in a table, if you would so desire, or place a table over it. However, you will need to use absolute positioning at one point to place other content on top of the image.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]