Синхронизация фонов с background-position

@Master_Yi · Регистрация: 22.12.2013

Студворк — интернет-сервис помощи студентам

Задача создать 10 блоков, высотой в 100% и шириной в 10% у которых будет одна и та же картинка, заданная через background-size: i*10% 50%;
Проблема в том что нет синхронизации блоков, картинка больше чем разрешение экрана по умолчанию и в итоге видны помехи между каждым блоков в виде нестыковки. Проблему явно можно решить если придумать как заставить картинку быть размером с размеры браузера, тобишь 100% на 100%, не больше не меньше.

Код и картинку-скриншот прилагаю:
(на всякий случай: скрипт делает так что background-position будет меняться на 10%, тобишь 0% 50%, 10% 50%...)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
body, html {padding: 0; margin: 0; width: 100%; height: 100%;}
 
.clr {clear: both;}
 
.tenpercent {width: 10%; height: 100%; display: block; float: left; background-image: url(413406.jpg); padding: 0; margin: 0;}
</style>
</head>
<body>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="clr"></div>
<script>
i=0;
$("div.tenpercent").each(function(index, element) {$(element).css({"backgroundPosition" : i*10+"% 50%"}); i++;});
</script>

Не подскажите как убрать неровности?

@Shakalaka · 05.11.2015, 15:02

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="wrap">
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
#wrap{
bakground-image:/*img*/;
background-size:100% 100%;
height:100%;
width:100%;
}
.tenpercent{
background:transparent;
}

@Master_Yi · 05.11.2015, 17:12 **[ТС]**

Shakalaka, Вы не поняли, или я не понял...
Задача именно разделить картинку на 10 частей, тогда можно проворачивать интересные анимации с частями картинки. Именно потому background-image присвоен каждому блоку...

@cellse · 05.11.2015, 18:15

Лично я не понял

Добавлено через 23 минуты
Master_Yi,

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body, html {padding: 0; margin: 0; width: 100%; height: 100%;}
 
.clr {clear: both;}
 
.tenpercent {
  width: 10%;
  height: 100%;
  display: block;
  float: left;
  background-image: url([url]http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg);[/url]
  padding: 0;
  margin: 0;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
}

JavaScript
1
2
3
4
5
6
7
8
i=0;
$("div.tenpercent").each(function(index, element) {
  $(element).css({"backgroundPosition" : i*10+"% 50%"});
 
  $(element).css({"left" : i*25+"px"});
  
  i++;
});

@Shakalaka · 05.11.2015, 18:16

Сообщение от Master_Yi

Задача именно разделить картинку на 10 частей, тогда можно проворачивать интересные анимации с частями картинки.

Хз, конечно, что вы там можете "интересное" делать с частями картинки, но если хотите именно 10 частей, то bgposition не так задавать надо.

JavaScript
1
2
3
4
5
6
7
8
9
10
function puzzle(){
    i=10;
    var width = $(".tenpercent").width();
    $(".tenpercent").each(function(){
        $(this).css({"backgroundPosition": i*width + "px 0"});
        i--;
    });
}
$(window).on('load', puzzle);
$(window).on('resize', puzzle);

http://jsfiddle.net/shakalaka/m3ozxqx9/

@cellse · 05.11.2015, 18:17

result

@Master_Yi · 05.11.2015, 19:23 **[ТС]**

cellse, Shakalaka, Правильно. Не знаю почему моя картинка не загрузилась. Загружал а ее нету. Но результат такой же как у вас, как видите там полосы между блоками, тобишь картинки идут не так как нужно, нет полноченной качественной картинки.
Но вот г-н Shakalaka понял о чем я и сделал. Благодарю!

Но есть еще вопрос:
Гениально конечно было использовать ширину картинки, но если та больше размера экрана то не влазит вся...
На скриншоте можете увидеть что картинка не отцентрирована, выходит что центр сдвигается вправо.

Так же специально подготовил вариант с маленькой картинкой для примера: http://jsfiddle.net/mzy2w79L/
Нужно что бы та растягивалась, а не повторялась...

Реально неловко как-то долбать вам мозги своими проблемами...

@Shakalaka · 05.11.2015, 20:26

CSS
1
2
background-size: auto 100%;
background-repeat:no-repeat;

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function puzzle(){
    i=0;
    var br = false;
    var width = $(".tenpercent").width();
    $(".tenpercent").each(function(){
        $(this).css({"backgroundPosition":- i*width + "px 100%"});      
        i++;
    });
}
$(window).on('load', puzzle);
$(window).on('resize', puzzle);

http://jsfiddle.net/shakalaka/m3ozxqx9/1/

@Master_Yi · 05.11.2015, 20:51 **[ТС]**

Shakalaka, Ну это уже совсем близко к ответу. Проблема в том что это фоновая картинка, ее задача всегда быть на весь экран, а данный вариант в случае неправильных размеров картинок. Ну тоесть вот что выходит:
Справа видно белое пространство(картинка слишком маленькая что бы быть растянута во весь экран). Тут нужно что-то типа background-size: cover; что бы картинку растянуло под все окно, без дополнительных скриптов не обойтись?

@Shakalaka · 05.11.2015, 22:43

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function puzzle(){
    i=0;
    var width = $(".tenpercent").width();
    var w_width = $(window).width();
    var height = $(".tenpercent").height();
    $(".tenpercent").each(function(){
        this.innerHTML = i*width + 'px';
        
        $(this).css({"backgroundSize":w_width + "px " + height + "px", "backgroundPosition":- i*width + "px 100%"});
        
    
            
        
        i++;
    });
}
$(window).on('load', puzzle);
$(window).on('resize', puzzle);

Сообщение от Master_Yi

Тут нужно что-то типа background-size: cover; что бы картинку растянуло под все окно

Вы же понимаете, что картинка будет деформироваться?

@Master_Yi · 05.11.2015, 22:50 **[ТС]**

Shakalaka, Черт возьми гениально! То что нужно! Благодарю за терпение и качественный ответ!

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	05.11.2015, 17:12 [ТС]
	Shakalaka, Вы не поняли, или я не понял... Задача именно разделить картинку на 10 частей, тогда можно проворачивать интересные анимации с частями картинки. Именно потому background-image присвоен каждому блоку... 0

@cellse 70 / 68 / 22 Регистрация: 12.08.2013 Сообщений: 297
	05.11.2015, 18:17
	result Миниатюры 0

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	05.11.2015, 19:23 [ТС]
	cellse, Shakalaka, Правильно. Не знаю почему моя картинка не загрузилась. Загружал а ее нету. Но результат такой же как у вас, как видите там полосы между блоками, тобишь картинки идут не так как нужно, нет полноченной качественной картинки. Но вот г-н Shakalaka понял о чем я и сделал. Благодарю! Но есть еще вопрос: Гениально конечно было использовать ширину картинки, но если та больше размера экрана то не влазит вся... На скриншоте можете увидеть что картинка не отцентрирована, выходит что центр сдвигается вправо. Так же специально подготовил вариант с маленькой картинкой для примера: http://jsfiddle.net/mzy2w79L/ Нужно что бы та растягивалась, а не повторялась... Реально неловко как-то долбать вам мозги своими проблемами... Миниатюры 0

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	05.11.2015, 20:51 [ТС]
	Shakalaka, Ну это уже совсем близко к ответу. Проблема в том что это фоновая картинка, ее задача всегда быть на весь экран, а данный вариант в случае неправильных размеров картинок. Ну тоесть вот что выходит: Справа видно белое пространство(картинка слишком маленькая что бы быть растянута во весь экран). Тут нужно что-то типа background-size: cover; что бы картинку растянуло под все окно, без дополнительных скриптов не обойтись? Миниатюры 0

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	05.11.2015, 22:50 [ТС]
	Shakalaka, Черт возьми гениально! То что нужно! Благодарю за терпение и качественный ответ! 0

Синхронизация фонов с background-position

Решение