Customize header image size and link it to home page?
-
I’m using the Adventure Journal theme. I would like the space available for the header image to better represent the customized image I am using, which is 1920 pixels in width and 1080 pixels in height. Currently, there’s not enough fixed height space.
Additionally, I would like the header image to link to my home page: http://www.ctpteam2011.com
Would someone be able to help me with what would need edited in CSS?
Thanks!
The blog I need help with is: (visible only to logged in users)
-
1920px? Do you realize that first off, that will limit the number of people that can view your entire header image to under 5% of the web users world wide, or 1.6% in the US?
Do you also realize that at 1080px tall that people would have to scroll down just to see content and in some cases, like with the 20+% that are still on 1024px x 768px monitor resolutions that they would have to scroll forever just to get to your content?
And we won’t even talk about anyone coming to your site using a smartphone.
Seriously, bad idea.
-
Worldwide monitor resolutions (Dec/2011 from StatCounter Global Stats)
1 — 1024×768 — 20.99%
2 — 1366×768 — 17.58%
3 — 1280×800 — 13.5%
4 — 1280×1024 — 7.8%
5 — 1440×900 — 6.7%
6 — 1920×1080 — 4.48% -
Another thought for you:
At 1920 x 1080, the image is likely going to be 4MB or larger in file size. In the US, broadband subscribers (broadband being defined as 256kbps or higher) is only 26.3%. Your site is going to take so long to load for 85% of people that they are simply not going to wait and will go elsewhere.
Another another thought:
Search engines consider page loading times when determining search engine ranking and your site will get thrown into the abyss.
-
Those are very valid points, thesacredpath. However, with the themed template I’m using, isn’t the header image space a fixed size? Therefore no matter the size of the original image, it will force whatever sized imageto fit into that fixed space, correct?
If I’m thinking correctly, I would just need to adjust the header image space in CSS to make its dimensions more relevant (not exact) to coincide with the 1920×1080 image. Currently, the header image displays “scrunched” in the height space allowed.
-
I can certainly decreased the size of the image for the use of the website so it loads faster, but I obviously don’t want to change proportions. Matching the proportions for the header image space with the actual image seems to be the problem here, I’m thinking… ?
-
However, with the themed template I’m using, isn’t the header image space a fixed size? Therefore no matter the size of the original image, it will force whatever sized image to fit into that fixed space, correct?
No, CSS will not resize the image. If you try and upload the 1920px wide image at appearance > header, it is likely going to choke on it and if it does upload it it will require you to crop it to the proportions of the set header image size, you are not going to like the job the wordpress software is going to do on downsizing it to fit the header image area.
If you put it into the CSS and then force a “width” on it you will be relying on the browser to resize the image and I can guarantee you will not be pleased with the results. Browsers resize images with high explosives and chainsaws.
If you resize the image to 920px wide on your computer, and upload it to your media library and then give me the URL of that image I can see what I can do with it.
-
You’re very kind to help — it’s very appreciated!
Here’s the URL: http://ctpteam2011.files.wordpress.com/2012/01/ctplogo1.jpg
-
Add this to your CSS. I think I got it all in there.
#banner { background: url("http://ctpteam2011.files.wordpress.com/2012/01/ctplogo1.jpg") no-repeat scroll center 7px #F3F3F3; height: 518px; } #banner img { visibility: hidden; } #wrapper-content { margin-top: -524px; padding-top: 526px; } -
I haven’t gotten the header image as a link yet, but I want to make sure we have this first before I plunge into that.
-
Ok, I have it in and it’s looking correct to me! You’re being incredibly helpful…thank you!
-
Ok, first off, the #logo stuff we had previously added, get rid of that and then add all this to the bottom of your CSS. What it does is hide the site title, but use that link for the header image with a little CSS trickery.
#logo { background: none repeat scroll 0 0 transparent; border: none; box-shadow: none; left: 25px; padding: 30px 0 0; } #site-title a { display: block; height: 518px; text-align: left; text-indent: -9999px; width: 920px; } #site-description { text-align: left; text-indent: -9999px; } -
When I put that code in and previewed it, it only shows a blank “box” over the header image. The link seems to be working though!
Here’s what I currently have in my CSS editor:
#logo {
display:none;
}#banner {
background:url(‘http://ctpteam2011.files.wordpress.com/2012/01/ctplogo1.jpg’) no-repeat scroll center 7px #F3F3F3;
height:518px;
}#banner img {
visibility:hidden;
}#wrapper-content {
margin-top:-524px;
padding-top:526px;
} -
This is what I’ve got in your custom CSS using Firebug and it works just fine.
#logo { background: none; border: none; box-shadow: none; left: 25px; padding: 30px 0 0; } #banner { background: url("http://ctpteam2011.files.wordpress.com/2012/01/ctplogo1.jpg") no-repeat scroll center 7px #F3F3F3; height: 518px; } #banner img { visibility: hidden; } #wrapper-content { margin-top: -524px; padding-top: 526px; } #site-title a { display: block; height: 518px; text-align: left; text-indent: -9999px; width: 920px; } #site-description { text-align: left; text-indent: -9999px; } -
I was wondering if you might be able to help me on a similar issue.
I’m using the Twenty-Eleven theme, and just bought the custom CSS option. All I want to do is reduce the size of the header. Your help is much appreciated
-David
-
Just after I wrote that, I saw a different forum post with my answer :)
https://en.forums.wordpress.com/topic/change-size-of-header-image-in-twentyten?replies=26
Thanks for all your help!
-
@ thesacredpath, I’ve taken a screen shot of what I see in preview when I paste that code: http://ctpteam2011.files.wordpress.com/2012/01/screenshot.jpg
-
@ctpteam2011, I’ve just tried this in my test blog. It works with Firefox, it works with Safari, it works with Opera, it works with Chrome – all on my Mac.
Delete all the code you have in your CSS edit window and then save to take things back to 100% stock.
Now put ONLY the following code into the CSS edit window. Preview is notorious – at least in my experience for screwing up. Save the stylesheet, clear your browser cache and then visit the site rather than using preview. I never use preview because about 50% of the time it doesn’t show the changes correctly.
-
Ok, I tried all of those things and it’s still showing up as a blank box (like in the screenshot I sent you a link of). I had a friend look at it on her PC and she sees the blank box too. What’s strange is that I can see the logo correctly on my iPhone Safari browser and the link functions properly… Not sure what the problem is!
-
- The topic ‘Customize header image size and link it to home page?’ is closed to new replies.
WordPress.com Forums 
