Header block background on twenty thirteen

  • Hi,

    I’m not sure if this is a stupid question but I can’t find any answer anywhere, hoping someone can help!

    Basically I left my site dormant for a while and have now decided to come back to it. I have the twenty thirteen theme installed and I want to put an image in the header. I’ve followed the process as normal but a block of colour is cutting off the image.

    The only thing I can think of is that I meddled with the css a few years ago, but I have no idea how to undo it. Is it possible to reset the css/theme? I’ve tried reinstalling the theme but no luck.

    Heres the link
    Thanks,
    Melanie

Viewing 2 replies - 1 through 2 (of 2 total)

  • I think the color your referring to is the menu for your site. Your header look will change at different sizes because of this rule.

    .site-header {
    background: url(https://www.melanietuition.co.uk/wp-content/uploads/2016/08/cropped-header-pen.jpg) no-repeat scroll top;
    background-size: 1600px auto;
}

    The line that states background-size: 1600px auto; is controlling how the background is being displayed. The 1600px is the width and the auto is the height. This rule is often used for headers. But, It will often cause the image to be clipped when the header grows or shrinks.

    If it’s important that the whole image is viewed you could add a rule stating background-size: 100% 100%. But, it would result in the image being distorted.

    You could also add additional media queries into your css to change background images or adjust the header size. It’s not really a problem with the theme. It’s just the css rule that controls how it’s displayed also causes the image to be clipped at different view port sizes.

    this one workes for me.thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header block background on twenty thirteen’ is closed to new replies.