Scrolling a page of the Sydney theme replaces the header with a black header


I created a page using the Sydney Theme with an image as a header background. When I view the page, the screen looks as expected. But when I scroll down to see the lower part of the page, the image at the header is replaced with a black area.

When I scroll down the page, how can I remove the black area and leave the image at the header. Or better still, when I scroll down, the image scrolls up until it disappears giving me the whole screen to display the page content. Please Click here to see the issue.


Sorry I’ve entered a wrong URL. Corrected URL


Put this CSS code into: customize > additional CSS:

.site-header.float-header {
    background-image: url(;
    background-repeat: no-repeat;
    background-size: 100% 100%;


There are two solutions:

  1. Follow the CSS code recommended by AWAN
  2. Delete the contents of Site Title and Tagline in the customizer.