Header image blurs if made full width of page

• 

  beatricemn · Member · Jun 26, 2014 at 7:24 pm

  • Copy link
  • Add topic to favorites

  I’m looking to make my header image the full width of the web page, if not the full width of the screen, then at least the width of the content that the ‘balloons’ theme allows.

  I have tried using CSS to make header width 100%, however this makes the image pixelated and blurry. I can’t work out how to upload the image separately, without cropping it in the ‘header’ section of customization!

  Is there any way to do this to make the header clear, and the width of the screen/ widest the theme allows?

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

• 

  designsimply · Member · Jun 26, 2014 at 8:03 pm

  • Copy link

  Good question! What you’ll want to do is upload the image to your media library separately and then grab the link. Then you can manually override the header image that gets set in the Appearance > Header page and set a background image in the header with CSS.

  Here is an example you can add to your Appearance > Customize > CSS editor:

  #masthead hgroup > a img {
  	display: none;
  }
  
  #masthead hgroup > a {
  	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) center repeat-x;
  	display: block;
  	width: 100%;
  	height: 145px;
  }

  Replace the url() image link to the one you uploaded to your media library and then update the height to match the height of the image.

• 

  beatricemn · Member · Jun 26, 2014 at 8:43 pm

  • Copy link

  Perfect, thanks so much! That worked a treat.
  Only other question – is there any way to make the corners slightly curved on the custom header, like they would be on the header image that gets set in the Appearance -Header page?

• 

  designsimply · Member · Jun 27, 2014 at 1:59 am

  • Copy link

  is there any way to make the corners slightly curved on the custom header

  Add this:

  border-radius: 8px;

  inside the rule for “#masthead hgroup > a”