WordPress.org

Ready to get started?Download WordPress

Forums

Book Lite
Increase Header Background Image Height (10 posts)

  1. Katelynbshp
    Member
    Posted 3 weeks ago #

    HI,

    Here is the link to my site. http://hotmomseries.com/
    I have a nice header image seleceted which is being cropped and I can't seem to find where I can edit the height to be taller than the default.

    Can someone please assist me with this? I looked at old forum posts but they seem to be for a different version of the Book Lite Theme because they all mention customheader.php which doesn't exists in my php files.

    Thank you!

  2. Hey there.

    When you say the image height, are we talking about the actual image or the space where the image is placed?

    I think it's the area where the image is placed and if that's the case then maybe some CSS like this:

    .site-header-main {
    height: 565px;
    }

    There is a chance that the theme has a CSS field in the options, if not then you can make a child theme:

    http://codex.wordpress.org/Child_Themes
    http://premium.wpmudev.org/blog/create-wordpress-child-theme/

    Or you can instead use a plugin if you like:

    http://wordpress.org/plugins/custom-css-manager-plugin/screenshots/

    http://wordpress.org/plugins/my-custom-css/screenshots/

    http://wordpress.org/plugins/pc-custom-css/

    http://wordpress.org/plugins/imporved-simpler-css/screenshots/

    Hope this helps :)

    Have a fantastic day! :)

  3. LivingtheGourmet
    Member
    Posted 3 weeks ago #

    Hi I am having issues with my header as well. Every time I upload an image, WP has me crop it to their default 400x170 px. This is making my headers appear really tiny. As Katelynbshp pointed out, all the older threads on enlarging header image are for themes that are outdated.

    Thank you!

  4. Katelynbshp
    Member
    Posted 2 weeks ago #

    thnak you I was able to make the space where the image is placed have a larger height, however I notice when I try the site on my iphone, the image is not responsive. it is very large- it doesnt resize to fit and iphone screen. I have it selected as 'cover' in the header image properties in the customize area- shouldn't this make the image responsive?

    Can you please let me know how this can be fixed?

  5. Hey there,

    Well setting a fixed height removes the responsiveness. But you can target this with media queries. As an example you could do something like:

    @media (min-width: 300px) and (max-width: 800px)  {
    	.site-header-main {
    		height: 50px !important;
    	}
    }

    That means when the browser is between 300px and 800px then the height of that class will be 50px.

    Chris Coyier is an awesome guy to follow on CSS stuff, he wrote a couple of articles here which should help you:

    http://css-tricks.com/logic-in-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Hope this helps :)

  6. Katelynbshp
    Member
    Posted 2 weeks ago #

    But can I get it to resize proportionally? Not just crop? I stll want the full image height to show, but because screen size is smaller, I want it to resize the image to fit, instead of just cropping it to show only 50px...that will cut off the title and faces on the image and isn't ideal.

    Thanks,

  7. Did you try it?

    The image isn't fixed, here's a screenshot:

    http://monosnap.com/image/5iMNMVmZx0maotOu4unc6kwHVVKwhq

    That's resized at 120px. The full image size is still there, we're simply resizing the header space for a smaller browser and leave that to resize the actual image.

    Some other resources for you:

    http://premium.wpmudev.org/blog/diy-truly-responsive-images-on-your-wordpress-website/
    http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

    You could also use CSS to provide a smaller more optimised image for the smaller browsers. For example:

    http://responsiveimages.org/
    http://css-tricks.com/which-responsive-images-solution-should-you-use/

    Hopefully this should help and get you on the way to what you need. :)

  8. Katelynbshp
    Member
    Posted 2 weeks ago #

    On my iphone it doesn't look like that, it's very cropped and the image is still large, it's doesn't resize.

    I tried adding the code as you suggested however it just bugged the menu and didn't make the image size smaller. Where specifically should I add it? There is already media screen coding so maybe it's conflicting.

    Still need a bit more help. thank you

  9. Katelynbshp
    Member
    Posted 1 week ago #

    Hi Sorry but my issue has still not been resolved.

    I tried editing the media queries as per the links you provided but changing the minimum width size does not affect it on my smartphone at all.

    Here's the link to a screenshot of what it looks like on my iphone5 http://grab.by/yLhg The image is still large (not proportionally resized) and the menu is cut off and doesn't work when clicked.

    I'd just like a simple step by step as to how I can fix the image size.

    Thank you very much!

  10. Hey there.

    I took a look at your site and I'm not seeing the code I suggested up there. Where did you add it?

    If I used developer tools through the iPhone to test that code and it worked fine.

    You can use those media queries to target different screen resolutions. You can alter the height so that it fits more, or you could use a different smaller image. This can be done through the @media.

    Take care.

Reply

You must log in to post.

About this Theme

About this Topic