Header image blurs if made full width of page

  • Author
    Posts
  • #1920470

    beatricemn
    Member

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

    #1920576

    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.

    #1920598

    beatricemn
    Member

    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?

    #1920661

    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”

The topic ‘Header image blurs if made full width of page’ is closed to new replies.