[Fktrctq]

Подскажите пожалуйста как размножить картинку из спрайта по горизонтали
делаю следующим образом

Код HTML:

<div class="logo"> <div class="log">
    ::before
     <span>заголовок</span>
    ::after
 </div> </div>

PHP код:

.logo {
    width: auto;
    height: 90px
    }
.log{
      position:absolute;
   }
.log:before{
   z-index:99;
   content:"";
   position:absolute;
   background:url('image/pc.png') repeat-x -152px 0;
   width:1px; 
   height:90px
   }
.log:after {
    width: 70px;
    height: 90px;
    right: -70px;
    }
.log:after {
    float: left;
    z-index: 99;
    content: "";
    position: absolute;
    background: url('image/pc.png')no-repeat -146px 0;
    } 


Но картинка в before появляется только один раз и не размножается по <div class=log> Подскажите что делаю не так?

[Гендальф Серый]

Точно так же

[oleg_ug]

Гендальф Серый, уже удалил дубли

[samoylov]

Fktrctq, у .log:before ширина в один пиксель задана.

[Fktrctq]

samoylov,Все правильно 1px а как по другому я задам размер картинки которую нужно вырезать из спрайта?

[samoylov]

Fktrctq, нет. Этим Вы задаете ширину блока, внутри которого собираетесь делать повторение по горизонтали. То есть по сути у вас картинка размножается, на на протяжении блока в один пиксель.

Для спрайтов есть правило - если элемент требуется повторять по горизонтали, все элементы в спрайте должны быть выстроены вертикально. И наоборот. Поэтому скорее всего нужно переделать сам спрайт.

[Fktrctq]

samoylov,а не подскажите можно ли масштабировать картинку из спрайта под разные разрешения например логотип?
в спрайте он имеет размер 145 на 145 пикселей его делаю под ПК как бы его сделать под планшет уменьшив до размера 120 на 120 Реально ли такое сделать используя спрайт?

[samoylov]

Fktrctq, посмотреть бы на спрайт (можно заблюрить айдентику, главное - расположение элементов). А так, масштабировать можно, используя background-sizе. Например, установим ширину изображения в 120px, а высота будет уменьшена пропорционально:

PHP код:

@media (max-width: 767px) {
  .log:before{
    background-size:120px auto;
  }
} 


Но я бы посоветовал для мобильных платформ вовсе делать retina-ready изображения, чтобы не было мыла. Если хотите, чтобы все было в одном спрайте для всех разрешений, то можете увеличить его до 240px по ширине. И также для десктопа уменьшить с помощью background-size до 145px, а на девайсах до 120px.

[Fktrctq]

samoylov,
попробовал

PHP код:

@media screen and (max-width: 599px)
.head:before {
    background-size: 120px auto;
    }
.head:before {
    z-index: 99;
    content: "";
    position: absolute;
    background: url('image/pc.png')no-repeat 0 0;
    width: 145px;
    height: 145px;
} 


при разрешении 599 выводится весь спрайт в размер 120 на 120 а он у меня размером 184 на 180
Подскажите пожалуйста как можно подправить чтобы из спрайта было видно только 120 на 120 от 0 точки

[samoylov]

Fktrctq, посмотрел спрайт. Теперь стало все понятно. Изображение имеет размеры 184х180:




Но! Справа от логотипа располагается ряд дополнительных элементов, и если уменьшить до 120px весь спрайт, то и они влезут в блок. Соответственно нужно уменьшить изображение с тем же коэффициентом, какой предусмотрен для самого логотипа.


Производим расчеты:

145 / 120 = 1.2083 - коэффициент уменьшения логотипа
184 / 1.2083 = 152.2 - размер всего спрайта при уменьшенном логотипе


Итоговый код:

PHP код:

.head:before {
  z-index: 99;
  content: "";
  position: absolute;
  background: url('http://i.imgur.com/DCuhFym.png')no-repeat 0 0;
  width: 145px;
  height: 145px;
} 

@media screen and (max-width: 599px) {
  .head:before {
      background-size: 152.5px auto;
      width: 120px;
      height: 120px;
  }
} 


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


Рабочий пример
http://jsbin.com/zikicanaxi/edit?html,css,output