WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I adjusted the page width using K2 theme from 780px to 850px. Now my header image is narrower than the page width. Have tried re-uploading the image, but no dice. How can I make my header image wider? Many thanks.
The blog I need help with is solidgoldcreativity.wordpress.com.
Can you post a link to your blog starting with http://
If this is the blog you are talking about, http://solidgoldcreativity.wordpress.com/ , you have to create a new header image at 850px wide, upload it to the media library, get the URL of that image, and then put it into the CSS in the appropriate place. The header you currently have is only 780px wide. The custom header upload feature will not work after you change the CSS.
solidgoldcreativity
#header {
background:#3371A3 url(URL of header) no-repeat scroll center center;
}Great, Sacred Path. I'll try that. Thanks so much x
You're welcome.
Hello again SP. OK, I've tried this but no success. I re-sized the image using Picasa so it's now 850px wide and loaded it to the Media Library. I copied your syntax with the correct URL into the CSS editing window. I've tried a few diff combos -- with and without brackets round the URL etc -- but still no luck. Any clues? Many thanks.
I don't see the header section in your custom CSS with the new header image. Did you take it out?
What is the URL of the new image?
Hello? How can you see it anyway? Do you have x-ray vision? I added the header command thingy in the CSS editing window.
The URL of the new image is ..
SG
All I see in your custom CSS is this:
#header {
}No declarations.
Since it appears that the header image is declared outside of the CSS, try the following with the !important attribute. That should override the other image.
#header {
background:#3371A3 url(http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2.jpg) no-repeat scroll center center !important;
}That image is not sized properly. The header image needs to be 850px wide by 200px high. Your image is 850px by 638px. You have to crop and resize it with an image editing program to the exact size of the header declaration.
It still doesn't think it's important :( Amazing how tricky all this stuff is. Wonder where the header image is being declared ...
Anyways, Sacred Path, thank you very much for your help. Will check out your blog anon. SG x
Our msgs crossed. Oh right, yeh, it's not cropped. Oops, forgot that bit. Will give it one more shot x
I just added the following to your custom CSS via Firebug and it works. I'm not sure what you are doing wrong.
#header {
background:#3371A3 url(http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2.jpg) repeat-y scroll center center !important;
}http://opposablethumbz.wordpress.com/files/2009/11/solid-hdr.png
I don't know what I'm doing wrong either ... getting headache, feel like throwing laptop out the window. I changed the "no-repeat" command to "repeat-y" and still no dice. It couldn't be cos the image file is now 850 x 199 px (ie, not 850 x 200) could it? Anyway, giving up now before I do something drastic.
Where do you get the patience?????? Please, you can go to sleep now. Ta xx
background:#3371A3 url(http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2.jpg) repeat-y scroll center center !important;Just FYI, "center center" is wrong. There should be only one center value there, the other should be "top" or "bottom"
OMG, the original CSS is wrong then. Actually it is the header CSS stuff put in by the custom header stuff I think.
The original (with the image link) would be
#header {
background:#3371A3 url(http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2.jpg) no-repeat scroll 0 0 !important;
}OK, you have a mistake in your background declaration syntax. There should not be a space between url and the first ( .
Remove the #header stuff and paste the following in:
#header {
background:#3371A3 url('http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2-e1258599882309.jpg') no-repeat scroll 0 0;
height:199px;
}Note that I changed the declared height to match your image at 199px. You can see the results on my test blog: http://flippintestblog.wordpress.com/ .
Oh, and I would suggest increasing the width declared in #primary to 540px to keep from having so much white space between the content and the sidebar stuff.
Dear Sacred Path, thank you so much for your help with this, and your amazing tenacity and patience.
I might try changing the #primary definition when I've had a wee rest ;)
Thank you again. SGxxx
Thank you devblog for your suggestions and help. I really appreciate it. SGxx
You're very welcome.
One other suggestion is to put a background on the inactive navigation tabs and make the font weight bold. Right now the titles on the tabs gets lost completely in the header image. You might add the following to your CSS and then play around with the background-color a little.
ul.menu li a {
background-color:#AAAAAA;
font-weight:bold;
}@TSP
When I used K2 I made headers that had a narrow white strip right across the bottom of the header image. That way the lettering on the page tabs didn't get lost in the image.
Thank you Sacred Path. Yeh, I've been wondering what to do about this. I like timethief's suggestion, except I'd like to have a black strip rather than a white strip so the text shows up white on black.
Have no idea how to do this. And no fortitude left today to tackle it ;) Still revelling in relief and gratitude about the width thingy.
Thanks again, SGx
Thank you timethief for the suggestion. I like it very much esp if I could make the strip black. Will tackle it shortly. Thanks, SGx
TT, that is a good suggestion.
@SG, in your image editing program you should be able to put a black rectangle over the bottom of the image. I would make it about 25px tall.
This topic has been closed to new replies.
