[NightFoxParticipant]

Seeing something here that i hope you can please help with i will post some images.

[NightFoxParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! Not sure which one you are referring as there are two sections with background image. However both of them have background-size:cover; which gives the best responsiveness. If you are referring the first section, then you can try background-size: 100%; or background-size: contain; on the style field.

Second section should be as is for best responsiveness with covered background.

Hope this helps.

Cheers!

[NightFoxParticipant]

Thx for your help.

Ah sorry, Im referring to section 2.

The resolution really isn’t looking good at all on that – not sure why? Any ideas on how to handle? The image is a good quality res image…

We’ve used an image 1500 × 1000 px – is this the optimal size, or should we be looking at 1290 x 1000 or something else? Want to really optimise this for optimal clarity of image across all browsers/ mobile.

[Rue NelModerator]

Hello There,

The image was indeed pixelated. It is because on mobile or smaller screen, the section height got stretch out. The height of you image is only 1000px, and the whole section stretch out to 2000 plus pixels. To resolve this, we must have the background image as image and make sure that the height is only at the maximum allowable height of the image. please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 767px){
  #hair {
    background-size: auto 1000px;
    background-position: top center;
    background-attachment: fixed !important;
  }    
}

This code should be enough to prevent the image from being pixelated. Please keep in mind that with this code, the image behind is fixed.

Please let us know if this works out for you.

[NightFoxParticipant]

This reply has been marked as private.

[ThaiModerator]

You’re very welcome 🙂

[Author]

Posts