[Resolved] Image size page hero

[antoine]

Hy,

Il would like to set a specific size for the background image in page hero header and Keep bacground color full width.

So the image overlap the bacground but not cover full width too.

Is there a way to adjust backgroud image size?

Thank you,

Antoine

[David]

Hi there,

if i understand correctly, then add your featured image to the header element, set the background position to center center. Add your background color – but do not select background color as overlay. Then add this CSS:

.page-hero {
    background-size: contain;
}

[antoine]

Hello David,

Thank you. I have just change contain by initial. It works fine.

Great support!

[David]

Glad to be of help.

[brandwatch]

Hi David, did the same thing and worked great to have a full size image on page hero, but doesn’t work on mobile 🙁

[Leo]

Any chance you can link us to the page in question?

Feel free to start a new topic so you can use the private URL field.

Let me know 🙂

[brandwatch]

https://www.18punto5.com/

[Leo]

What is the effect you’d like to achieve?

What if we use a specific background image just for mobile?

[brandwatch]

SURE, how can I use a specific image only for mobile?

[David]

Hi there,

the Site you imported has some CSS for positioning the background image which needs to be removed. In Customizer > Additional CSS remove this:

/* ------
Page Header
------- */

.page-hero {
  height: 100vh;
  background-size: 70vh;
  background-position: 90%;
}
.inside-page-hero {			
	margin-left: 40px;
	margin-right: 50%;
}

@media (max-width: 419px ){
  .page-hero {
		min-height: 568px;
		background-position: 42vw !important;
	}
  .inside-page-hero {
    margin-left: 20px !important;
		margin-right: 20% !important;
  }
}
@media (min-width: 420px) and (max-width: 768px) {
  .page-hero {
    background-position: 60vw !important;	
    background-size: 60vh !important;
  }
  .inside-page-hero {
    margin-right: 40% !important;
  }
}

[brandwatch]

Thanks!!! It work!!!

[David]

Glad to be of help 🙂

[Author]

Posts