Jump to content
Sign in to follow this  
cloudrc

Увеличенное фоновое изображение на iPad и iPhone

Recommended Posts

Доброго времени суток!

На сайте клиента есть фиксированный background со свойством cover.

На компьютере и android'ах все отлично, а вот на устройствах apple на главной фоновое изображение сильно увеличено(приближено), то есть оно не подгоняется по экрану, а отображается кусок запикселенного изображения.

Буду благодарен за помощь!

post-686629-0-93856400-1436803653_thumb.jpg

post-686629-0-89516300-1436803668_thumb.jpg

Edited by cloudrc

Share this post


Link to post
Share on other sites

Проблема оказалась немного другая.

При добавлении контента на страницу, будь то текст, видео или изображение, фоновое изображение все сильнее увеличивается.

Т.е. сзади наблюдается планета на фоне, добавили модуль приветствие с текстом, планета увеличилась, добавили модуль хиты продаж, еще больше увеличилась, ну и если добавить все, что нужно, то фон на странице весь будет в пикселях.

 

Очень нужна помощь в решении этого вопроса!

Share this post


Link to post
Share on other sites

Готовы заплатить за решение данного вопроса.

Share this post


Link to post
Share on other sites

Добавил в css к html - height:100%;, тогда все заработало, но появилась дополнительная вертикальная полоса прокрутки(

Share this post


Link to post
Share on other sites

Overflow hidden

Share this post


Link to post
Share on other sites

Overflow hidden

Это просто уберет второй вертикальный скролл, а при всех значениях, которые я описывал выше, на iPad прокрутка стала "жесткой", то есть если раньше при прокрутке я убирал палец с экрана, она еще делала несколько шагов. Теперь, я убираю палец - страница прокрутка моментально останавливается.

Share this post


Link to post
Share on other sites

Трое суток мучений принесли свои плоды - нашел способ, как безобидно вставить фоновое изображение на сайт и чтобы устройства на iOS его нормально отображали

В создал div и прописал ему стили(пишу по памяти):

Имя div'а {

Background: url(***);

Position:fixed;

Left:0;

Top:0;

Height:100%;

Width:100%;

Background-attachment: cover;

}

post-686629-0-59664500-1437005880_thumb.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.