[Resolved] Image size page hero

Home Forums Support Image size page hero

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #942530
    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

    #942779
    David
    Staff
    Customer Support

    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;
    }
    #943045
    antoine

    Hello David,

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

    Great support!

    #943054
    David
    Staff
    Customer Support
    #1088692
    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 🙁

    #1088749
    Leo
    Staff
    Customer Support

    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 🙂

    #1090118
    brandwatch
    #1090153
    Leo
    Staff
    Customer Support

    What is the effect you’d like to achieve?

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

    #1097394
    brandwatch

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

    #1097655
    David
    Staff
    Customer Support

    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;
      }
    }
    #1098060
    brandwatch

    Thanks!!! It work!!!

    #1098078
    David
    Staff
    Customer Support

    Glad to be of help 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.