Can I widen the header image in the Manifest theme?

• 

  murieldombret · Member · Nov 17, 2011 at 2:46 pm

  • Copy link
  • Add topic to favorites

  I’d like to find out whether the header image in the Manifest them can be widened from 500 pixels. I’ve gone through the process of modifying the CSS to make the site 600 pixels wide, but the upload module for the header will not allow me to upload an image that is 600 pixels wide (or rather, it still forces me to crop it to 500px). Is there a solution or am I trying to get around something hardcoded that I just won’t be able to change?
  Blog url: http://murieldombret.wordpress.com/

• 

  chrisrudzki · Member · Nov 17, 2011 at 3:38 pm

  • Copy link

  Hi there,

  Your best bet would be to include the new header image in #header-image with:

  background-image: url('/pathto/header.jpg');

  And then disable the custom header at Appearance -> Header.

  Don’t hesitate to contact us again if you need anymore help. :-)

• 

  murieldombret · Member · Nov 21, 2011 at 3:56 pm

  • Copy link

  Thanks for this. I did as suggested and, until I disabled the header image (by selecting ‘remove header image’ and saving the changes), it was fine. As soon as I do that the header image disappears. I’ve looked at the page source and it appears that the div for the header image is actually being removed, which is why it won’t show. What’s the solution? Many thanks.

• 

  staff-blorbo · Staff · Nov 21, 2011 at 9:19 pm

  • Copy link

  Are able to select any header image, then override it with the code that Chris provided above?

• 

  murieldombret · Member · Nov 21, 2011 at 10:18 pm

  • Copy link

  As I cannot upload an image of greater than 500 pixels in width to the automatic uploader at ‘Appearance > Header’, I uploaded the image separately to the site (I want 600 pixels). I then changed the CSS. The new header image appeared behind the existing header. When I then disabled the header in ‘Appearance > Header’ I lost the new image.

• 

  chrisrudzki · Member · Nov 22, 2011 at 8:19 pm

  • Copy link

  Sorry about that!

  Could you try enabling any header image at Appearance -> Header in your dashboard?

  Then add something like the following to your CSS:

  #header-image {
  background-image:url('http://myurl.com/header.jpg');
  width:600px;
  height:200px;
  }
  
  #header-image img {
  display:none;
  }

• 

  murieldombret · Member · Nov 28, 2011 at 7:42 pm

  • Copy link

  Thanks for this. That bit of code didn’t quite do it, I was still having a problem. So we tweaked the CSS in our local development environment and here is what works:

  #header-image {
  left:0;
  position:absolute;
  top:0;
  z-index:-1;
  background:url(‘http://murieldombret.files.wordpress.com/2011/11/clothes_by_muriel_dombret_banner_21nov11.jpg’) no-repeat;
  width:600px;
  height:200px;
  }

  #header-image img {
  display:none;
  }