The Trouble with the Header

[sireesanwar]

Theme: Flexible Squares

I've had two friends have issues with their layouts header. The image kept looking smaller than it should and finally I discovered that the problem what PhotoBucket. So I'm here to go over a few header issues because there are a couple other issues I can think of.... (see coding with changeable information at the bottom of post)

1. Coding Error: When a coding error occurs it is often one of two issues.

1. Dimensions: At the bottom of the coding there is a set starting with ".headerimage {" (see below for coding). Under that are width and height measurements. These should be made to match your image. If your image is 700 x 241 then "width: 700px;" and  "height: 241px;". Only change the numbers.
2. URL: The url should looks like background-image: url(HEADER IMAGE URL); expect where it says HEADER IMAGE URL should be the direct link from your photobucket or other image account. It is important that the ( ) be around the link and that it is followed up with a semi-colon. Sometimes the coding moves down a line so that the semi-colon is on the next line. Be care that this isn't just text wrapping rather than an additional character in the coding. If this too is correct check the PhotoBucket Error.

2. Photo Bucket Error: As I said, I've had two friends have this problem so I'm going to teach you how to fix it.

What You See
What You Want






What is the problem?
PhotoBucket's uploading dimensions. See you can set you PhotoBucket to automatically downsize large images so as not to take up too much space. The problem is that if it is set to low an image with a width of 700 with be down sized.

Here's how to fix it.

• Go to your PhotoBucket
• In the small upload portion of the page there is a ling that says "max image size:"
• Click the OPTIONS link
• For headers that are a width of 700 you need to pick the " 15" screen ( 800 x 600 )" option at the very least. I have mine set to 1 bigger than that for backgrounds.
• Click Save
• Now you will have to re-upload that image but I would delete the downsized version first.
• Now that link in your coding should be right so the image header on your journal should be doing what you want.
• If not I would try re-inputting the image URL as sometimes it just wants a change and to be saved.

Changeable information in BOLD:
.headerimage {
          position: relative;
          border-color: #cccccc;
          border-style: solid;
         border-width: 1px 1px 0px 1px;
         width: 750px; (SEE 1:1 Above)
         height: 250px; (SEE1:1 Above)
         padding-left: 0px;
         padding-right: 0x;
         padding-bottom: 0px;
         padding-top: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 1px;
         background-color: #ffffff;
        background-image: url(INSERT HEADER IMAGE LINK); (See 1:2 or 2 above)
        background-position: center;      
        background-repeat: no-repeat;
            }

If you are still experiencing problems, don't hesitate to comment and let me know.