Как предотвратить перемещение/свертывание фонового положения?

Я довольно новичок в этом, но я учусь, когда хожу и беру курсы, но иногда я попадал в маленький блокпост, подобный этому.Как предотвратить перемещение/свертывание фонового положения?

Когда браузер находится на 100%, обратные изображения великолепны, но по мере того, как вы минимизировали весь путь до 25%, положение фонового изображения сворачивается или «скрывается», и мне бы хотелось, чтобы верхняя точка фонового изображения изображений оставалась неповрежденной независимо от того, как минимизировать или максимизировать.

Я прикреплял пример:

Он Уменьшенный до 25%. Вы можете посетить medshopandbeyond.com и уменьшить масштаб, чтобы увидеть проблему.

Это HTML я использовал для фоновых изображений:

<div id="header-image6"></div>

Это CSS я использовал для них

#header-image6 { 
    background-image:url("{{ 'WhoWeAre3.jpg' | asset_url }}"); 
    height: 750px; 
    position: relative; 
    background-repeat: no-repeat; 
    background-position: center top; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size:cover; 
    margin-bottom: 0px; 
    width: 100%; 
    margin-top: 30px; 
    }

источник

2016-02-17 Loco Motive

Проверенный код и нашел это:

@media only screen and (min-width: 320px) and (max-width: 480px){ 
#header-image6{ 
    background-image:url("//cdn.shopify.com/s/files/1/0930/6704/t/2/assets/WhoWeAre3.jpg?7803954532461737215"); 
    background-repeat:no-repeat; 
    background-position:center; 
    margin:0 auto; 
    width:340px; 
    height:250px; 
    margin-left:-20px; 
    display:none; 
    visibility:hidden 
    } 
}

Для ширины окна просмотра между 320px и 480px, вы повторно установив ширину и высоту элемента и, таким образом, изображение сжимается.

Вы можете позволить ширине и высоте быть на 100%, как в случае по умолчанию. Прошу прокомментировать, если есть что-то еще, чтобы выдвинуть.

источник

2016-02-17 06:40:02

Это имеет смысл в некотором роде, но как это может повлиять на настольную версию. Правило, которое я установил в случае, о котором вы говорите, для мобильного онлайн. –

Как вы сказали, «по мере того, как вы минимизировали весь путь до 25%, положение фонового изображения рушится или« скрывается »... поэтому вы уменьшаете ширину окна просмотра, и это также повлияет на рабочую версию. Вы пытались удалить ширину и высоту, как указано в приведенном выше случае? –

Привет! да. Я удалил его. Я изменил это. И все равно остается прежним. –

В классе "#header-image6", что вы предоставили, не изменить "background-size:contain".

Надеюсь, что это поможет вам, не стесняйтесь спрашивать здесь.

источник

2016-02-17 05:23:41

До сих пор я пробовал это, и он не работал. Я пробовал max-width 100%, max-height 100%, min-width, min-height, background-size: содержать, background-size: 100% 100% даже устанавливая абсолютное положение с z-индексом и ничего , и еще пару вещей. Все не работало –

В принципе. background-size: содержать работы в определенной степени. но теперь изображение больше не является полной шириной с одной стороны экрана на другую. –

Как предотвратить перемещение/свертывание фонового положения?

ответ

Смежные вопросы