Make header image smaller

  • Unknown's avatar
    mikeosbornphoto · Member ·

    Hi there,
    I’d like the reduce the height of my home page gold header image by around half with a CSS adjustment.

    I’m using a customised version of Nishita.

    If any of you clever guys and gals are able to lend a hand with coding, that would be much appreciated.

    With best wishes from Mike

    http://www.mikeosbornphoto.com

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hfzrhmn · Member ·

    Hi Mike,

    you can use this CSS: 

    #header-image img {
	height: 150px;
}

    I am not sure how it should work in the backend, though. You will need to upload a 1024x150px image to match the CSS, but I am not quite sure if the theme will allow that (some themes are hard-coded to use a specific sized image).

    But nevertheless try that first.

  • Unknown's avatar
    mikeosbornphoto · Member ·

    Many thanks, hfzrhmn, I’ll give that a go and let you know.

    Uploading a header image requires a certain size, so I’m not sure it’ll allow the smaller one, unless of course there’s a way round it.

    My other thought is changing to a theme with the look of Nishita but with a fully flexible header?…

  • Unknown's avatar
    hfzrhmn · Member ·

    Uploading a header image requires a certain size, so I’m not sure it’ll allow the smaller one, unless of course there’s a way round it.

    Yeah that’s what I was talking about. If it doesn’t work, we can use CSS to (roughly speaking) inject an image directly into the header area. The upside is it can be of any size, while the downsize is that this image can only be changed/modified/updated via CSS, and not via Appearance -> Header in the Dashbaord area.

  • Unknown's avatar
    mikeosbornphoto · Member ·

    Ah, I understand. Well, I would be happy with a CSS fix because that image is a permanent fixture anyway.

    I haven’t experimented yet, but can’t see a way it would work via the Appearance-header area.

    So willing to make a coding change…

  • Unknown's avatar
    hfzrhmn · Member ·

    Try something like this: 

    // First we hide the theme-generated header image
#header-image a {
	display: none;
}

// Next we inject our own image
#header-image {
	width: 100px; // Insert your image's width here
	height: 200px; // Insert your image's height here
	background: url("http://mikeosbornphoto.files.wordpress.com/2014/02/natural-cluster.jpg") left top no-repeat; // Example image URL, replace with your own
}

    For the URL in the background, you will need to use the URL of the header image you want to use. To get that URL, upload the image in your dashboard (Media -> Add New) and then get it from there and paste it to the CSS above.

  • Unknown's avatar
    mikeosbornphoto · Member ·

    Hi hfzrhmn,
    Many thanks for the instructions – they were very clear and very successful!

    I now have a much narrower header image which pushes the content further up the page – a big improvement.

    Thanks once again – I owe you a drink or something :-)

    With best wishes,
    Mike

  • The topic ‘Make header image smaller’ is closed to new replies.