Changing Header Image and Related How-tos

[av8rmike]

Since a number of these questions have come up over time, I decided to try to compile all the issues into one post.

Comments

[joanmay530]

i picked DJ girl of expressive layouts...
now.. i just pasted this ..

#header-inner {
background-image: url http://www.ust.edu.ph/images_2005/banner_04.jpg);
}
/*#header, #header-content {
background-image: none;
}*?

the original header is gone.. but my desired picture is not showing.. please help me..thank you very much,..

[av8rmike]

The CSS on your page has url (http://www.ust.edu.ph/images_2005/banner_04.jpg);
Remove the space between url and (, because white space is pretty important in CSS.

[joanmay530]

oh my gosh!! yipeee!! it's working..
but there's a problem. the picture appeared in tiles.. so im seeing just a part of the picture..

like when you choose "tiled" for your desktop wallpaper..

does it need to have a definite size/number of pixels and the like?

[av8rmike]

As it says above, headers (and therefore layouts) are usually 940 pixels wide, by about 250-270px tall. Your image is only about 320x240. You can prevent the tiling by adding background-repeat: no-repeat; to #header-inner, and you can play with the background-position attribute to move it around. You also did something weird to the #header property, because I saw the dj-girl header again. To summarize, try this:
#header-inner {
background: url(http://pics.livejournal.com/joanmay530/pic/0005s8zy) right top no-repeat;
}
#header, #header-content {
background-image: none;
}

[inaudiblechaos]

Hi, I was just wondering what's the difference between the two headers in the 'camo grey' layout, theres a bar that runs over the header basically, i know theres a post that tells you how to remove that, but if i do that i cant add an image underneath. basically i want to remove the bar (preferably but i dont really mind) and add a background image to the header. thanks (:

[av8rmike]

*points up to the third comment in the post* That comment basically explains it.

[inaudiblechaos]

oops sorry, thank you!

[ooo5]

Thanks! Just in case anyone else goes crazy... :)

I had to change

#header, #header-content {
background-image: none;
}

to

.layout-tw #header, #header-content {
background-image: none;
}

[av8rmike]

*checks your journal and base theme*

Interesting, apparently the Bloom bases have differing headers, depending on which column layout is in use. I hope that's the only one because I don't feel like going through the stylesheet repository to find any others. ;)

[kimonos_house]

I'm having problems with my header displaying properly in Internet Explorer. I'm altering a Bunnylicious layout.

http://kimonos-house.livejournal.com/

The page will load correctly and look the way it's supposed to, with a black bar across the bottom of the header. If I scroll down and then scroll back up, a purple .gif from the original Bunnylicious layout will appear across the bottom of the header. I cannot figure out why the heck it's doing this. It's only in IE.

Also, I don't know if this is the appropriate place to ask, but I want to replace the star image by each entry title with another image. I've tried replacing the background to .asset-header, .asset-name and .asset-name-hover, all to no avail. What triggers the star graphic?

Any help is appreciated. My page is going to be spotlighted by LJ, so I'm trying to get it presentable as quickly as I can.

[av8rmike]

Congratulations on the spotlight! To get rid of the additional images, copy the CSS exactly from the second highlighted box above. I specifically mentioned Bunnylicious as one of the themes that has extra images.

Post ornaments are covered under the entry header tag. Try the directions in this post.

[kimonos_house]

Thank you so much for the quick reply! I've made the changes to the CSS as you mentioned. Unfortunately, it's still doing the weird background replacement after scrolling down and back up. Could an issue in some other div be causing it? I'm wondering if it's the "Peekaboo" bug (http://www.dracos.co.uk/code/ie6-css-bug/).

Congratulations on the spotlight!

Thanks! :D

[av8rmike]

There are a bunch of display problems with IE6 that are sometimes lumped under the "Peekaboo" bug, probably incorrectly so. When I load your page in IE6, I see a brief flash of the purple in the header, and the sidebar and journal content overlap the header until I scroll up and down. The purple can be changed with:
#header { background-color: #000000;}
I think the display problems may actually be due to some padding at the bottom of #header-content that is being used to "stretch" the header box downwards. Try:
#header-content { padding-bottom: 0px;} then increasing the height property of #header-inner.

[jense]

Hi av8rmike, I stumbled on here and read this: 'For uniformity on Vox's site, all the layouts default to 940px wide. The sidebars default to 190px wide, leaving 750px for the main content column in the 2-column layout, and 560px in the 3-column layout (the actual column with is 40px less, because of 20px margin on either side). Therefore, to scale the journal content to the correct width (assuming the sidebars remain the same width) take the width of your new header image and subtract 190px for each sidebar you plan to have in your layout

[av8rmike]

Your journal looked OK to me in both FF and IE. As long as the containing boxes are wide enough for everything (borders and margins included), it should be fine.