Forums

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

Home Forums CSS How does muse-themes.com maintain image aspect ratio whilst page resized…

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

    and the image also fills the whole page.

    I have read ‘Bulletproof full page background images don’t exist. see http://css-plus.com/2012/01/bulletproof-full-page-background-images/

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

    Have a look here http://www.muse-themes.com/collections/adobe-muse-widgets/products/versa-slide?view=preview

    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 http://alistapart.com/article/supersize-that-background-please

    Thanks
    Tom

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