Fullscreen Header Image

Hi there,

I chose the image slider for the frontpage, the slider is automatically resized to fullscreen in all the devices and it is perfect. The images are cut off on the right/left but they cover the entire screen (this is not a problem: I’ll choose images suitable even in the case in which the sides are cut).

For the other pages I chose the single image as header. Differently from the slider, the header image, in the various other devices, keep its proportions and it is scaled to fit the full width.
Is there a way to have also the auto fullscreen header image in the pages (even if they are cut to the right/left) and in all the devices? The logo and the menu should have the header image as background on all devices.

I have read a precedent topic and so I tried with the following code, what I get is the header image displayed in its entirety on all devices (a step forward!), but it does not go into fullscreen mode:

.header-image {
	background-size: cover !important;
/*instead of auto*/
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	background-position: center top !important;
	background-attachment: fixed;
	height: 100vh;
}

@media only screen and (max-width: 1024px) {
	.header-image {
		-webkit-background-size: auto !important;
		background-size: auto !important;
		background-attachment: scroll;
		height: 100vh;
	}
}

What can I do?

Thank you for your help!

Hello XenaSky,

Looks like your issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

Hi Roman,

ok, thanks anyway!

best regards

You are welcome XenaSky!

And have a nice day :slight_smile:

Kind Regards, Roman.

Hi There,

I am still very interested by this topic, and I would like to know who could I make the Home page picture the size of the screen (like the “Sydney” theme) ?

Today, on my homepage, I can see my first page : Services in your template but, I would like to only see the background Picture.

I try to enter Xenasky code lines on my Simple Custom CSS plugin, but, it does not do anything.

Can you help me ?

Best regards,
Gauthier

Hello Gauthier,

Which theme are you using?

Can you please create a new topic with more details regarding your issue?

Kind Regards, Roman.

Hello! I am having trouble with my header image. It is not showing the full image.

What can i do to fix this problem?

My website is beardbreed.com

Thank You!

Hello Joseph,

Can you please provide some explanatory screenshots and create your own topic for your question to keep forum in good order?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.