Header picture dimesions
-
Is it possible to change the size and dimensions of the header picture in fresh and clean with CSS? (pixel sizes)
The blog I need help with is: (visible only to logged in users)
-
Hi. In order to assist you, we need the URL of your blog, starting with http:// please. Thanks.
-
I too would like to increase the size and dimensions of my header image. Is there an easy way to go about this? My blog is http://markkintzel.wordpress.com.
Thank you!
-
At wordpress.com it requires modification to the CSS which requires the Custom Design Upgrade.
-
Thank you for the speedy reply. I do have the Custom Design Upgrade however know nothing about CSS. Is there any support via WordPress to make this happen?
-
We can help you. Right now you are using a “reactive” designed theme which means all the elements of the web page will resize depending on the size of the display/browser window someone is viewing it on. Once you make the header larger via CSS, the automatic resizing of the header image will no longer work.
Right now the maximum size for the original header image is 960px x 260px. What size are you wanting to use, and have you already created that image? If you have created that image, upload it to the media library and then post the URL of that image here in this thread and we can help you with that.
-
Here’s the URL: http://markkintzel.wordpress.com/wp-admin/media.php?attachment_id=391&action=edit
You’ll notice the top of my blog has Mark Kintzel Design and other random bits. I will be removing that text.
Thank you so much for your assistance!
-
One more thing — it also appears that there is a slight line/border around the current header image. Can that be removed as well?
Again, many thanks.
-
Since your site is set to private, I cannot view the image, nor can I view your site.
Can you temporarily make it public (public/block search engines)?
-
Oh wait, that wasn’t the issue. You need to get the image URL from the media library. If you locate that image in the library, click the show link and then look down toward the bottom of that page, you will see the image URL in the grey field. That is the one we need.
-
That image is WAY to huge to be used as a header. It has to be sized down to something near the width of the theme you are using since you cannot do a nearly 3000px wide theme and it has to be optimized for the web. Right now it is nearly 2MB, and a header image should be in the 150k range for file size.
-
-
Would it be possible to share the CSS code for this change? I’d like to try it on my site, as well. The graphic is just coming out too large. My site is: http://www.allthingsattainable.com
Thanks!
-
You can resize images on WordPress.com by using a query string to set width or height. For example, to resize the image markkintzel provide you could add a width to it like this:
I think I found a way to change out the background image for markkintzel and still keep the design responsive. It uses a little CSS3, so the responsive part won’t work in IE8 or lower, but I think it will work in browsers on most small devices (which is the target for responsive design anyway). The CSS3 rule that does it is “background-size”.
@markkintzel, give this a try:
#main-image img { visibility: hidden; padding-top: 14%; } #main-image a { display: block; background: url(http://markkintzel.files.wordpress.com/2012/01/scan2.jpeg?w=960) no-repeat center bottom; background-size: 100%; } -
@davidmblanke, we’d absolutely share code with you. However, note that CSS is specific to your theme and http://markkintzel.wordpress.com/ is currently using Chateau while http://allthingsattainable.com/ is currently using Elemin. Can you please start a new thread and ask for help with Elemin specifically? It would be helpful if you included an image URL too.
-
-
Thank you for all these responses. However, I stink at anything ‘code’ related. Is there someone at WordPress who could make the change for me or at least guide me step by step?
Again, thank you.
-
@markkintzel
You are getting step by step instructions from Staff (designsimply) and from the only Volunteer who regularly helps with CSS editing (thesacredpath) and no Staff does not enter your blog and do this for you. -
It worked! Thank you, thank you!
So each time I update this header image I’ll need to update the CSS code to link to the media image?
Also, there seems to be a faint gray line on the bottom and the right of the image?
- The topic ‘Header picture dimesions’ is closed to new replies.
WordPress.com Forums 
