Автор Тема: Background на разных мониторах  (Прочитано 403 раз)

05 Сентября 2013, 22:36:27
  • Новичок
  • *
  • Сообщений: 7
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Здравствуйте,

Столкнулся с такой проблемой, что background на сайте на больших мониторах смотрится хорошо, а с более мелким разрешением вообще не так, как хотелось бы и наоборот.
Можно ли как-то настроить Бэк, чтобы его разрешение менялось в зависимости от разрешения на экране посетителя например ?

Спасибо : )
06 Сентября 2013, 10:41:11
Ответ #1
  • Фрилансер
  • *
  • Сообщений: 140
  • Репутация: +0/-0
    • Просмотр профиля
С правилами @media и условие, в котором используются разрешение экрана.
Поищите в поиске Адаптивная верска.
07 Сентября 2013, 00:25:32
Ответ #2
  • Новичок
  • *
  • Сообщений: 7
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Хмм..Адаптивная вёрстка, это немного не то, что нужно..
Все элементы сайта (конпки, меню, контент) уже адаптированы под разные разрешения + mobile + tablet.

Суть проблемы в том, что бэк.. если его ставишь большим, то на среднестатистических Лаптопах с 15.6  бэк не будет содержать всех задуманных элементов так как вдина только часть большого бэка...
И наоборот, если поставить маленький бэк, чтобы на 15.6 смотрелся отлично, то на других мониторах, скажем 23...27..картинка будет мелкой...
+ бэк - это фотография - поэтому важно отображение целиком и на 27 и на 15.6 :)
07 Сентября 2013, 12:10:27
Ответ #3
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86054
  • Репутация: +25403/-0
  • Сообщество PrestaShop
    • Просмотр профиля
.bg_body {
    width: 100%;
    height: 100%; 
    background: transparent url("../images/background.jpg") no-repeat center center;
    background-attachment: fixed;
    overflow: auto;
    -moz-background-size:100% 100%;
    -o-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -khtml-background-size:100% 100%;
    background-size:100% 100%;
}
07 Сентября 2013, 12:18:15
Ответ #4
  • Ветеран
  • *****
  • Сообщений: 32999
  • Репутация: +26759/-0
    • Просмотр профиля
Можно на js
В стили добавить
#background-image{
    position:absolute;
    top:0;
    left:0;
    z-index:-10;
    overflow: hidden;
    width: 100%;
    display:none;
}
Создать js файл
$(document).ready(function() {
 var bgImage = $('#background-image');     
 
    function resizeImg() {
      var imgwidth = bgImage.width(),
           imgheight = bgImage.height(),
           winwidth = $(window).width(),
           winheight = $(window).height(),
           widthratio = winwidth / imgwidth,
           heightratio = winheight / imgheight,
           widthdiff = heightratio * imgwidth,
           heightdiff = widthratio * imgheight;
 
      if(heightdiff>winheight) {
        bgImage.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImage.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });   
      }
     
     $("#background-image").show();
       
    }
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    });
 
});
Подключить его в header.tpl