Background Size / Min-Width

[TourneDisque]

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.

[Allan]

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

[TourneDisque]

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 11 years, 2 months ago by TourneDisque.
• This reply was modified 11 years, 2 months ago by TourneDisque.

[Allan]

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

[Author]

Posts