Header picture dimesions

  • Author
    Posts
  • #800983

    nick981
    Member

    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 tradsfolkarts.wordpress.com.

    #801237

    airodyssey
    Member

    Hi. In order to assist you, we need the URL of your blog, starting with http:// please. Thanks.

    #801320

    markkintzel
    Member

    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!

    #801321

    At wordpress.com it requires modification to the CSS which requires the Custom Design Upgrade.

    #801322

    markkintzel
    Member

    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?

    #801323

    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.

    #801324

    markkintzel
    Member

    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!

    #801325

    markkintzel
    Member

    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.

    #801326

    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)?

    #801327

    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.

    #801328

    markkintzel
    Member
    #801330

    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.

    #801334

    markkintzel
    Member

    Thank you for trying!

    #801336

    davidmblanke
    Member

    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!

    #801340

    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%;
    }
    #801341

    @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.

    #801343

    davidmblanke
    Member

    OK, just started the new link. Thanks!

    #801345

    markkintzel
    Member

    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.

    #801347

    timethief
    Member

    @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.

    #801348

    markkintzel
    Member

    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.