How to make the image header be at full size when seen from a computer?

[franllan]

Hello

What code could I add to make the image header be at full size when seen in a computer?
The image header can be seen at full size when seen in a mobile and also when the browser in the computer is reduced to the smallest but not when it is fully open, so the image header gets cut.

Thank you for your help!

---

[Support]

Hello, that image is set to cover all the element, but the aspect ratio of that image is not correct, the image is 1280px x 500px.

My suggestion is that you use an image that is 1920×350.

You can make the image size set to auto, adding the class bg-size-auto to the SECTION element, but you may need to fix that image size. So it’s not recommended.

---

[franllan]

This reply has been marked as private.

[Support]

Hello, you can center the image and set it not cover the element, adding this css:

(css/custom.css)

@media (min-width: 992px) {
	.page-header.page-header-modern.page-header-background {
		padding: 150px 0 !important;
		background-size: auto !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}
}

Same thing for the video, limit the width and center it, increading the height:

@media (min-width: 992px) {
	[data-plugin-video-background] {
		padding: 250px 0 !important;
	}
	
	[data-plugin-video-background] video {
		max-width: 1280px !important;
	}
}

---

[Author]

Posts