Untile header background image

use this code

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    background-repeat: no-repeat;
    margin-bottom: 0;
    min-height: 150px;
}

Here is a section of the style.css:

.site-header {
background-color: #2c2d33;
padding-top: 2.618em;
color: #9aa0a7;
background-position: center center;
position: relative;
z-index: 999; }
.site-header .site-logo-anchor {
display: block; }
.site-header .site-logo-anchor img {
max-height: 2.618em;
width: auto; }
.site-header .site-branding,
.site-header .site-logo-anchor {
margin-bottom: 1.618em; }
.site-header .widget {
margin-bottom: 0; }

I tried adding “background-repeat: no-repeat;” but that did not work.

use important

background-repeat: no-repeat !important;

Hello prabhukb,

Thank you for your help I added “!important” and that fixed the repeat/tile issue.

Is there a way of removing the large white space between the header and the primary menu?

Thanks a lot.
Sam

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: 0;
}

I posted the following :
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
margin-bottom: 0; }

in the style.css in my child theme directory but did not seem to change anything.

add !important