В каком направлении копать для адаптивного скроллируемого фона?

NDanilov2015 · April 26, 2016

Добрый день! Есть такая задача - в заготовке для сайта имеется картинка очень большой ширины (около 4000 px). Её необходимо сделать адаптивным фоном (к размеру окна браузера/экрана компьютера), выводить центральную часть с несколькими товарами которые "вшиты" в картинку - а остальное пустить под возможность горизонтального скроллинга. (На саму фоновую картину должен быть пристыкован атрибут usemap, сообщенный с "картой", ведущей на страницы конкретных товаров).

Пока что удавалось реализовать лишь адаптивность, но без скроллинга (и кажется, в таком варианте и map не пристыковать):

.box{
background: url('../img/1.jpg') no-repeat;
background-position: center center;
background-attachment: fixed;

background-size: cover;
}

(.box - это главный контейнер вложенный в <body>). Скроллингу мешает background-attachment, выставленное в fixed. Но стоит убрать fixed, тогда исчезает адаптивность...

Как грамотно решается такая задача?) Может здесь надо задействовать jQuery (и как именно)?

PS. Заранее спасибо!

klierik · April 26, 2016

А в чем собственно суть проблемы? Выложи пример кода на http://jsfiddle.net/

NDanilov2015 · April 26, 2016

Суть проблемы в том, чтобы горизонтально длинная картинка была адаптируемой к изменению размера окна браузера (или экрана компьютера) - с отображением некоторой ее центральной части, с горизонтальным скроллингом. И еще чтобы к этому был прицеплен usemap атрибут, дабы сегменты картинки стали кликабельными для конечного пользователя.

В общем, придётся идти в немного другом направлении, чем я думал - никаким background-стилем это не сделать, видимо надо просто брать <img> с атрибутом usemap, вкладывать его в <div> и с этим как-то колдовать:

<body>

<div class="box" id="agregat">

    <div id="img-box">
		<img src="img/1.jpg" style="display: block;" alt="" usemap="#Map" />
	</div>
  
<map name="Map" id="Map">
    <area alt="" title="" href="#" shape="poly" coords="55,744,234,743,236,869,60,877" />
    <area alt="" title="" href="#" shape="poly" coords="243,745,409,747,411,869,249,871" />
    ....
И так далее

К сожалению, на jsfiddle не прицепить саму картинку чтобы это работало с кодом - но ключевой код выложил как он выглядит на данную минуту (верхняя часть и в HTML, и в CSS самое главное):
https://jsfiddle.net/NDanilov2016/c6271jcm/2/

Спасибо за содействие!

Sign In

В каком направлении копать для адаптивного скроллируемого фона?

Question

NDanilov2015

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

NDanilov2015

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information