Resize header image

[ClintZA]

Hi guys,

First of all, please be gentle as I am just a beginner and am playing around with web design.

I recently switched from a fixed to fluid web page. Much better but I have a header image that was originally created to fit the 800px width of the fixed page. Obviously now that I have gone fluid it leaves some background space on either side of the image when viewed over 800px width.

My question is whether there is a way to resize this image? Now, the thing is I do not want it to get wider and taller, I just want it to fit the width. I also do not, obviously, want it to stretch to fit as there is a logo which would be a mess. So effectively I need a way to possibly crop the edges of the image depending on the width of the page being viewed.

Is this even possible or am I barking up totally the wrong tree here?

 

[saor]

Depends on how the image looks. If the edges of the image end in a solid color / straightforward gradient, then you could create an image 1px wide from the left and right edges of your logo, and use those 1px images to fill up the page width on either side of the image. Though I suppose if it's a solid color you could just have a layer/div beneath your image with that color in it so that your logo floats on top.

 

[guest2013-1]

you'd need to change the original header image with the logo for this. hopefully you have the original psd for this

 

[alphabyte]

I agree with the comments about using a background color to fill the space.
Another possibility would be to split your image into two: the logo plus the rest of the image. Keep the logo at a fixed size, and allow the other portion to resize as required.
Enjoy, and let us know what you decide.

 

[ITCynic]

I agree with the posters above about a background color to fill the space.

Have a look at a few popular websites in different sized browsers and get some inspiration on what they are doing. Use Firebug in Firefox to see the CSS from the sites you like.

 

[ClintZA]

Thanks guys.

Saor, unfortunately it is not a solid colour on the edges. What I have attempted to do at the moment is fade the edges of the image (i've got it as a .png) into the page background but it does not look ideal.

AcidRazor, all images are my own so I am able to tweak them as required. What would your suggestion have been in this instance?

Alphabyte, this is something I toyed with and might well be the best way. I did battle a little with aligning them and the like once I did do this. The problem still though would be that the header image would take up far too much of the page when viewed on particularly wide screens. I also fear that the logo would then also look a little lost.

 

[ITCynic]

Thanks guys.

Saor, unfortunately it is not a solid colour on the edges. What I have attempted to do at the moment is fade the edges of the image (i've got it as a .png) into the page background but it does not look ideal.

AcidRazor, all images are my own so I am able to tweak them as required. What would your suggestion have been in this instance?

Alphabyte, this is something I toyed with and might well be the best way. I did battle a little with aligning them and the like once I did do this. The problem still though would be that the header image would take up far too much of the page when viewed on particularly wide screens. I also fear that the logo would then also look a little lost.

If its not a solid colour on the edges, take a 1px slice of the edge and use that to do a horizontal repeating background.

Or possibly use a contrasting colour to compliment the logo.

I am at present doing a design for a client where I used a dark background to compliment my logo portion. You can check it out on my development server @ design.computerguy-za.com to see what I am referring to. Code is not tidy yet as still in development

 

[guest2013-1]

Thanks guys.

Saor, unfortunately it is not a solid colour on the edges. What I have attempted to do at the moment is fade the edges of the image (i've got it as a .png) into the page background but it does not look ideal.

AcidRazor, all images are my own so I am able to tweak them as required. What would your suggestion have been in this instance?

Alphabyte, this is something I toyed with and might well be the best way. I did battle a little with aligning them and the like once I did do this. The problem still though would be that the header image would take up far too much of the page when viewed on particularly wide screens. I also fear that the logo would then also look a little lost.

It really depends on what the background image is. Like someone else suggested, perhaps split the logo from the background entirely?

 

[ClintZA]

Hey guys,

I originally looked at blending the edges of the image into the background colour and have been happy with that for a while but now feel like a change.

I have the fluid web design but with a max width of 1280. I was now considering having a header image that was 1280 wide but what I want is that when you view it on smaller screens instead of shrinking the header image it merely cuts off the edges. I hope you know what I mean.

So effectively the logo is in the middle of the image and I am happy for the viewer to only see the amount of background that their monitor allows. They do not need to see it all as it is just a background.

How do I do this? I am also looking to have rounded corners on the image if possible.

Thanks in advance.

 

[alphabyte]

You could try the following, and adapt it to your needs:
In the stylesheet, add:

.topbox {
border-radius:15px;
width: 100%;
overflow:hidden;
background-image:url(images/banner.jpg);
background-position:center;
background-repeat:no-repeat;
height: 150px;
}
#outer {width:800px;}

In your html you would then use:

<body>
<div id="outer">
<div class="topbox"><h1>This is my page header</h1></div>
etc., etc.
</div>
</body>

Hope this helps.

 

[ClintZA]

Thanks, I'll try that and see how it goes.