Need Help with Custom Wordpress Blog Header

[mlmwealthangel]

I have a custom header image that is uploaded to my wordpress blog. However, my theme requires that the header stretch across the width of the page.

Problem is that on my computer when the header looks fine, it looks distorted on other screens and vise versa. Arrghhh!

How do I adjust the code so that the header adjusts to the width of the screen no matter what the screen resolution is?

Thanks,
Tracey

[Eric Lorence]

Without looking at your site, you will probably need to go into your WP theme's CSS file and find the code that looks something like this:

#header {

clear: both;

padding: 10px;

margin: 0 auto;

background: url(http://example.com/images(or other)/header.jpg) top right no-repeat;

height: 150px;

}

And make your modifications in there.

Also check if you theme has an IE6 or Opera dedicated CSS file, you may have to change that as well.

Good luck!

[Jill Carpenter]

Usually with something like a header if it is just a graphic, I work backwards. Find the size of the image first. Then create a new file with all the same sizing (like in photoshop) and drag the image you want to use into it. Tweek it to fill in the desired space. Rename it the same as the file you're replacing and upload it with a file manager or FTP and write over the old file.

[jhongren]

Originally Posted by avenuegirl

Usually with something like a header if it is just a graphic, I work backwards. Find the size of the image first. Then create a new file with all the same sizing (like in photoshop) and drag the image you want to use into it. Tweek it to fill in the desired space. Rename it the same as the file you're replacing and upload it with a file manager or FTP and write over the old file.

Good advice, Avenuegirl!

With a smaller size graphic, it takes up less space and it loads faster.

John

[mlmwealthangel]

Thanks everyone...

Avenuegirl...my theme didn't have a definite width, it was listed in the original theme as 100%. So in creating my header, it is designed as 980x250. But the format of the theme requires the image to stretch across the top...I have no idea what size is needed specifically because no matter what size I make it, it is distorted from one computer to the next.

I did center it as suggested by one warrior but it looks horrible and off.

So my main goal is to discover the code that allows the image to adjust no matter the screen resolution.

I need a little more guidance. Oh, and I forgot to leave a link to the blog so people could see it in my original post. It is The Network Marketing Success Blog

Thanks,
Tracey

[ThomM]

Tracey this is the code in your css file for the header.

#header{
width: 100%;
height: 120px;
margin: 0;
padding: 0;
background: url(images/traceyheader980x250.jpg) center no-repeat;
height: 250px;
border-bottom: 6px solid #000;
color: #fff;
clear: both;
}

Add this to it and it may solve your problem.

background-color:#580716;

You may want to also change the height to 250 to match your header image.

No need to worry about your IE style sheet.