Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 20, 2016 at 9:47 pm #702097
    Trystan

    Dear Kriesi support,

    We would like to implement a fullscreen background image on our site. The idea behind it is this:

    – We create a separate background image for every major resolution. E.g. 767px, 1280px, 2560px etc.
    – The CSS code always shows the appropriate image for the resolution

    How do I do that? Right now we created one background image for 2560px and it is cut off on all devices smaller than that unfortunately. Should we create the multiple background images or is there maybe a way to scale down the 2560px image so it fits also on all screens?

    Thank you.

    October 20, 2016 at 10:23 pm #702115
    Basilis

    Hey Felix!

    For such a huge image ( or to have a certain image look everywhere perect ) the best option is to load a different image
    per screen size and resize the image for the screen, if you want it to be pixel perfect.

    Let us know if you will need help with that

    Regards,
    Basilis

    October 20, 2016 at 10:55 pm #702122
    Trystan

    Hey Basilis,

    Yes please, I would like help with that :)

    What screen sizes do you recommend to look good on most devices? What do I have to do to define different sized background images?

    Thanks,
    Felix

    October 24, 2016 at 6:22 am #703117
    Ismael

    Hi,

    How did you add the background image? Did you use the theme options or the advance layout builder? If you are using custom css modifications, change the image on certain screen sizes with css media queries. Example.

    #image { 
    background-image: url(largeimage.jpg); 
}

@media only screen and (max-width: 768px) {
    #image { 
        background-image: url(smallimage.jpg); 
    }
}

    Best regards,
    Ismael

    November 3, 2016 at 8:36 pm #707939
    Trystan

    Hello Ismael,

    Thanks for the input! I used the theme options, but I guess it would be better to use the custom.css.

    What resolutions should I use? Can I just use whatever resolution I like or are there predefined resolutions to use for @media only screen?

    Thanks!

    November 6, 2016 at 4:12 pm #708863
    Nikko

    Hi,

    There are a lot of screen resolutions used depending on the device, you might want to check it here: http://stephen.io/mediaqueries/
    Use the maximum width size for the image, for example if you use @media only screen and (max-width:767px) you can use an image with a width of 767px, that would be the best image size. Hope this helps :)

    Best regards,
    Nikko

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