Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • February 17, 2022 at 12:34 am #1341004
    Jak73

    Hi,

    i would like to use a background image in my burger menue for different responsive and desktop resolutions.
    I’m using this css code:
    #av-burger-menu-ul {
    background-repeat: no-repeat;
    background: #ff0197;
    background-image: url(mydomain/myimage.jpg);
    background-position: 50% 100%;
    background-attachment: scroll;
    background-size: cover;
    }
    I added some information on the background image. This looks good in desktop view, but when i switch to smaller resolutions the information on the background image and it’s informations gets cut.
    How can i add different images for different resolutions, to make the information visible in the main responsive resolutions?

    kind regards Jak

    February 17, 2022 at 1:35 pm #1341149
    Yigit

    Hey Jak,

    Thanks for contacting us!

    You can use media queries to target different resolutions as following and adjust as needed

    @media only screen and (max-width: 480px) { 
#av-burger-menu-ul {
background-repeat: no-repeat;
background: #ff0197;
background-image: url(mydomain/my-mobile-image.jpg);
background-position: 50% 100%;
background-attachment: scroll;
background-size: cover;
}
}

    Regards,
    Yigit

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