Docs

[jensmith3]

Hello,

My site is at the temporary url of http://103.37.8.129/~thekidsa/

I am trying to have an image in the header run the full width and have added the following into my child theme but it only fills about three-quarters of the screen.

Are you able to assist?

Many thanks and kind regards,

Jenny

header.masthead {
background-image: url(‘http://103.37.8.129/~thekidsa/wp-content/uploads/2016/08/TKAbanner.jpg’);
background-repeat: no-repeat;
width: 100%;
max-width: 100%;
}

[jensmith3]

This reply has been marked as private.

[Lely]

Hello Jenny,

Please try using the following CSS:

header.masthead{
    background-image: url("http://103.37.8.129/~thekidsa/wp-content/uploads/2016/08/TKAbanner.jpg");
    width: 100%;
    max-width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

The image you were using is only 800px in width. It’s not enough to cover the entire browser width that’s why it’s not fullwidth. 1600px width is a safe width to cover the entire browser width. Please update your image.

Hope this helps.

[jensmith3]

Thank you so much and I can see what you mean about the image size. I’ll see if I can source a larger one.

Excellent support as always.

Kind regards,

Jenny

[Paul R]

You’re welcome and thank you for your kind words.

[Author]

Posts