Линия в 1px

Question

[lukaville]

Откуда она взялась и как это исправить? Код

Браузер: Google Chrome Canary

Comments

[Сергей Протько]

Хоть бы браузер указали…

Answer 1

[sskalmykov]

В FF этой линии нет.
Попробуйте сделать так:
background-position: left center;
border: 0 none;

Comments

[lukaville]

после этого в хроме линия переместилась направо…

[sskalmykov]

Тогда допишите так:
background: left center no-repeat transparent;

[sskalmykov]

Забыл сказать где. У класса .center

[sskalmykov]

Ой, не у класса а у #center.
Прошу прощения. Пятница…

[lukaville]

не работает (, но всё равно спасибо — сделаю как-нибудь по-другому.

[sskalmykov]

Странно.
Вставьте в каскадник все вот это:

body {
background: #333;
margin: 0px;
padding: 0px;
}

#center {
width: 800px;
padding: 0px;
position:absolute;
left:50%;
margin-left:-400px;
top: 20px;
}

.polosa {
width: 800px;
height: 300px;

background: center center no-repeat transparent;
background-size: cover;
}

У меня точно помогло. Хром 13

[lukaville]

Ок, спасибо.

Answer 2

[Сергей Протько]

Это проделки background-size под вэбкитом. Больше ничего не могу сказать.

Answer 3

[startsevdenis]

Кстати избавиться от:
position:absolute;
left:50%;
margin-left:-400px;


можно делая:
margin: 0 auto;

Решению проблемы конечно не помогает, но в итоге размер файла немного меньше.
И кстати для чего вы такую большую картинку используете для такого маленького блока, сделайте фон под размер блока и откажитесь пока от CSS3?

Comments

[lukaville]

Такая большая картинка, потому что эта же картинка во весь экран будет разворачиваться, а CSS3, так как это будет приложение для хрома. Спасибо за совет, учту.

[Сергей Протько]

Чем хуже обычный img с max/min width который по клику будет увеличиваться (а точнее увеличиваться разрмер блока)… мне если честно не понятно.