Reply To: Header image not displayed in full

If you remove or comment out this code near the bottom of your CSS (in the responsive section) it should make the image adjust a bit more –

@media only screen and (max-width: 1800px) {
	
	.front-page-1,
	.front-page-4,
	.front-page-5,
	.front-page-7,
	.front-page-9,
	.front-page-12 {
		-webkit-background-size: auto;
		-moz-background-size:    auto;
		background-size: auto; 
	}

}

You would need to add background-size: cover; to the front-page-1 code in your CSS.

.front-page-1 {
    -webkit-background-size: cover;
    -moz-background-size:    cover;
    background-size: cover; 
}

Keep in mind, the image itself won’t show up in the exact same size and position on all browsers especially since it is being resized to fit the screen.

The way responsive images work, is the browser will try to resize the image the best it can without stretching it too much while also making sure to fill the entire width of the screen without losing quality. That’s why it will show up in different places on certain devices since the browser is trying to scale the image the best it can to fit the screen it’s being viewed on. If you tried to do this with any other theme that uses Responsive Background images/Parallax it would have the same result.

Also, it’s going to be hard to see White text on top of that image since your background is white. I’d recommend either placing a tint to the background, or changing your font color.