The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How does maintain image aspect ratio whilst page resized…

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #203817

    and the image also fills the whole page.

    I have read ‘Bulletproof full page background images don’t exist. see

    The muse-themes solution looks pretty close to perfect for my liking.

    Have a look here

    Click on the menu burger on the bottom left corner and you will see a female. Regardless of the size of the browser the aspect ratio is perfect just some parts of the image appear/disappear.

    I cannot get this affect using their CSS (.html {
    background: #352a35 url(“/images/menu_bg.jpg”) no-repeat scroll center center / cover ;

    My image is chopped off at the top and also the page shows the background color when the browser is very large.

    My style sheet editor does not like ” / cover” so I suspect it is some sort of ‘instruction’ to JavaScript ???

    EDIT: I replaced ‘scroll’ with ‘fixed’ and got the desired effect. (why does muse have scroll I wonder?)
    I also realised ‘/ cover’ is CSS3. Now to investigate what browsers this won’t work on and find workarounds – if possible.

    EDIT2: Very good article here


Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.