Background Size / Min-Width

Home Forums Launch Pad HTML Background Size / Min-Width

This topic is: not resolved
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #6749
    TourneDisque
    Participant

    Hi themecatcher,

    Is it possible to keep min-width from being ignored when the background image is 100% width and repeats-y.

    index.html
    <div id="img-overlay-effects" class="custom"></div>

    styles.css
    #img-overlay-effects {
    min-height: 100%;
    min-width: 837px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: repeat;
    }

    .custom {
    background: #000000 url(http://i.imgur.com/4UNT1SG.jpg) center center fixed repeat-y;
    background-size: 100% auto;
    }

    note: min-width is ignored.

    #6778
    Allan
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #6783
    TourneDisque
    Participant

    Hi themecatcher,

    Yes, that is pretty much that the desired effect above but now is it possible to translate the same style into the other image code. Seems like I’d be so simple but my experiment fail and background repeat is now ignored.


    <div id="nojs-background">
    ""<!-- Non-JavaScript background -->
    </div>


    body {
    min-width: 837px;
    height: 100%;
    margin: 0px;
    }

    #nojs-background img {
    min-height: 100%;
    min-width: 837px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: repeat;
    }

    .js-enabled #nojs-background {
    background-size: 100% auto;
    }

    TourneDisque
    TC Member

    • This reply was modified 6 years, 11 months ago by TourneDisque.
    • This reply was modified 6 years, 11 months ago by TourneDisque.
    #6804
    Allan
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy