Perfect picture size for jumbotron (hero image)?

Illdy
1

Hey guys,

today I began to work with Illdy. I started to edit the jumbotron section (text, hero image ect…). But when I previewed the website and checked if the hero image is displayed right in all screen sizes (phone, tablet, desktop) I recognized that in tablet and phone size the image wasn’t displayed right (cut off hero image).

Is there any perfect image size I could use so that the jumbotron image will be displayed right in all screen sizes?

Thank you for your answers. (And sorry for my bad english, I’m german)

2

Hello @m1st3rl1nux,

Can you please provide me the website link so I can have a live preview of the behaviour and provide you some CSS fix for better display?

There are many previous forum posts where depending on the image layout you could use background-size: contain or background-position: center; and CSS media queries to handle different display sizes.

#header {
    width: 100%;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

The current demo picture is 2000x1250px

Let me know if the above got you forward with the setup, otherwise let me know if I can see the live website.

Regards