View Full Version : header image

10-30-2007, 12:32 AM
hi there, im new to html, but im building my own site with a free hosting service
to display my concept art as a designer, for use as an online resume.
i created an index.html file and started editing it, i have a list of code my buddy gaveme as a reference.

for my header image, i want my image to span the entire width of the page, but when i display the image at say, 100% width or 1024 pixels in width, theres still a marginaround the image:(

how do i get an image to stretch from one side of the page all the way to the other so that it will appear that way to everyone that visits the site uniformly? ie: visitor 1 is running 1024x768, visitor 2 is running 1600x1200, etc.

10-30-2007, 04:15 AM
The thing is that images are fixed width, and unless you use PHP to resize the image on the server before its loaded into the page its difficult to resize the image without loss of quality.

This is actually a javascript question. It is not something too difficult, but it might be a little confusing since you are new to HTML (and probably to Javascript as well).


Here are the parts you can edit. Change nirvana.jpg to the link of your image. If you want the page to only change its width and remain its height, remove exactly this.

" height="' + image1_height + '

var image1 = '<img src="nirvana.jpg" width="' + image1_width
+ '" height="' + image1_height + '">';

10-30-2007, 04:45 AM
this is because in some browsers the body and html tags have a margin and padding. With css you can set theese both to 0 pixels to get rid of the space.

Put this in your header area

html, body {

css is very handy ;)


11-01-2007, 06:33 AM
so what your saying is that css is the way to go here for a simple solution?
or is javascript the direction i want to head in, seems both of you had solutions to this problem.

im familiar with style sheets, i just dont know if the coding language for html
works the same way for them.

i would like to avoid java if i can, all i need is a nice image at the top, some
mouseovers to different directories containing thumbs of my artwork in
various sections - example

mouseovers - home work resume contact

under the resume section, i just need it to link to my page of art thumbs,
whitch ppl can click for a full sized pic, etc, which would read like this


gallery 1 - concepts and illustrations

gallery 2 - demonology tree

gallery 3 - finished paintings

gallery 4 - character design and sketch blog

and thats about it. the part that is confusing me the most at the moment
is how to make the link to the next page work. in other words, is the css
used on all pages? ( i would think so ), and if it is, are the other pages just
.html pages even though they contain a style sheet?

11-01-2007, 10:13 PM
I'm confused you how could have learned css without HTML, but CSS controls the way content is displayed and HTML controls the content that is displayed. Fundamental difference. But they work together. Now HTML will put an image into your file, CSS can style it (give it a border for instance), and Javascript can give you the ability to find the size of the window and resize the image based on that.

What I'm saying is the link I put above has the necessary information to dynamically resize an image based on the windows size.

The other questions you raised are separate from the issue above. You put the CSS information into the <head></head> of the html document, and the browser uses that to decide how the content is displayed.

If I didn't answer your question, then you weren't very clear about things. If you haven't yet, I would recommend going through some online tutorials about XHTML, and getting the basics of it down before tackling too much.

11-02-2007, 05:16 AM
I'm confused you how could have learned css without HTML,

no i didnt mean to sound like i knew css, i meant that i knew what a css page is. i simple designed some graphics for someone's website who was using a css page, the coding however, im not familiar with. your explanation of the differences was very helpful though,
and i will read up on the tutorials, much thx's!

11-02-2007, 02:26 PM
I think the OP was very clear with his question(s) but different people have given different answers due to some misunderstandings as it seems.

The margin on the page is resulting from some default margin (or padding, depending on browser) of the body element and can be removed with CSS, as GO ILLINI correctly stated. Now, a dynamic image size isnít all that hard if youíre using percent units. Those units refer to the size of the parent element, though. For example, if you put an image on the site like this:

<img src="[source]" width="100%" alt="Header Image"> The image will be 100% wide (the height will be scaled accordingly automatically) and if the width of any parent of this image isnít fixed the image will be scaled if the window is resized.

However, note that, since the image is most likely a raster image (as opposed to a scalable vector graphic (SVG)), it will become very pixelated if resized bigger than the original size. Also it isnít quite current practice to adapt a page to the screen resolution like this (at least itís hard if youíre using a lot of raster graphics). A better way would be to apply a different stylesheet to user agents with different screen resolution, and a default one if the resolution canít be detected, or to have one fixed page layout for all user agents (everybody will see the same, only bigger or smaller, depending on resolution).

A good article on current design practices can be found at http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

11-02-2007, 04:00 PM
Babar104 does not say what sort of image they have. If it is one of their own design for the purpose then can it be made tileable? If so, then the solution is to put the image as a background to the body, with repeat-x set but no repeat-y.

John Rostron

11-02-2007, 04:53 PM
Everyone has posted a correct solution to a point. This question however falls back to the design of the page. It is not a good practice to resize an image to 100% of the screen.

For example, if your image's original attributes were 640x75 and you resized it keeping the aspect ratio, on a 1600 display the image would be 1600x187(.5). This image would appear pixelated. This could also distort the layout of your design. If you kept the height of the original and just resized the width, the image would end up distorted.

If you sized the image to appear best on higher resolutions, your file size could end up overly large. It would also net the same end results as the previous example when resized to smaller resolutions, distortion or pixelation.

As has been mentioned, the padding and margin settings will remove the 'border' space you are experiencing on the page. There is also the option that was mentioned of using PHP/GD to resize the image before it is served to the client. And I would never recommend the javascript option to resize the image.

My recommendation is to rethink your overall design. You seem to want to achieve a liquid layout(or at least that is what I gather from you wanting to size to 100%). As was previously mentioned, work on setting up a background tile image to fill in the space that the image does not.

Whenever I layout a page, I usually use several nested layersets in Photoshop. I.E. Header->HeaderImage->HeaderText. When I layout the actual code of the page it would be something similar to

<div id="header">
<h1>Site title</h1>
I would then style the div#header with the background tile, set my h1 to the size of the "image" and set the image as a background and then style the text. This is just the way that I have found is easiest and is by no means the right way.

If you posted a quick sketch of what you want to achieve I could more than likely point you in the right direction on how to achieve your goal.

11-02-2007, 08:23 PM
If you posted a quick sketch of what you want to achieve I could more than likely point you in the right direction on how to achieve your goal.

alright, i'll post an image of what i want the page to look like, the header image is unfinished, but youll get the idea, and yes it is a raster image (jpg), but it is very important that my page has a piece of my work on it so that viewers get the idea that they are looking at an artist's page, not having one would be somewhat unprofessional in the concept art field as someone mentioned vector art, i work with vector illustration as a designer, but that is not the position im applying for, so the raster image has to stay.

here is what i want to achieve, nothing complex, just straight forward
and simple layout. the blank space below the image will have a simple
paragraph of text, being my "letter of intent". and that is all. >


11-02-2007, 09:11 PM
There are a few ways to handle this, depending on how in depth you want to go. The basic layout is the same, but how you present the image is different.

The basic layout would be a header div with a repeating background. Inside this header div, you would place your image inside of the div and position it to the right.

If your background is tileable, set the starting position to the right edge and it should meet up with your picture's edges without too much problem.

Now if you have a complicated background, which from the looks of it I am betting you will. You will want to cut your image completely away from the background and set the background to transparent.

As far as options for transparency, you could go with a GIF(although I am sure you are going to have far more than 256 colors), PNG(not supported by all browsers, although there are workarounds), or you can use a flash movie with a transparent background(I haven't used Flash since, maybe, version 4, but back then using a raster image in a flash file would net you a considerably larger file size than the original raster image).

When I get home tonight, I will do an overlay on your image and show you where the "cuts" could be.

But to be honest, don't worry about the layout until the design is done :) Your menu position or orientation may change, height of header, etc.