Предотвращение повторения фона из отсечения

У меня есть следующий пример: http://jsfiddle.net/umxvq52j/ повторного фона звезд.

CSS

.stars
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 320px;
    background: url('http://i59.tinypic.com/2i95zzk.png') left center repeat-x;
}

Я хочу сделать так, чтобы звезды отлично заполняли пространство, и вы не обрезали края звезд! Так что, если я на меньшем экране, он покажет 2-3 звезды флеша, затем 6-7 и т.д., И никогда не покажет половину звезды.

Возможно ли это?

Ответы

Ответ 1

Я не знаю, это то, что вы ищете, но посмотрите на атрибут round фона

background: url('http://i59.tinypic.com/2i95zzk.png') round 0 0;

Кредит переходит на фоновый интервал CSS3

Ответ 2

Для лучшей поддержки браузера, и если вы не возражаете против JavaScript и немного больше набираете текст:

Fiddle

HTML:

<div class="stars_con">
<div class="stars"></div>
</div>

CSS

.stars_con
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 320px;

}
.stars{
    background: url('http://i59.tinypic.com/2i95zzk.png') left center repeat-x;
    width:100%;height: 320px;
}

JS:

$(window).on("resize load", function () {
    var screenWidth = $(window).width();
    var starWidth = 320;
    var width = screenWidth - (screenWidth % starWidth);
    $('.stars').css({
        'width': width
    });
});

Ответ 3

Вы можете сделать что-то довольно взломанное, и если вы установили измерения на своих изображениях: jsfiddle здесь

.stars
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 320px;
    background: url('http://placehold.it/200x200') left center repeat-x;
}

@media screen and (max-width: 600px) {
    .stars
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 320px;
    background: url('http://placehold.it/200x200'),url('http://placehold.it/200x200'); 
    background-position: left, right;
    background-repeat: no-repeat, no-repeat;
}
}