Css фонового изображения не отображается правильно на мобильное устройство

.header { 
    background: #15181f url(images/bg-header.jpg) repeat; 
    color: #fff; 
} 
.footer { 
    background: #15181f url(images/bg-footer.jpg) repeat; 
    color: #fff; 
}

Эй, ребята,Css фонового изображения не отображается правильно на мобильное устройство

моего верхнее и нижние колонтитулы фонового изображения не будет правильно отображаться на мобильных устройствах, такие как Android или iPhone, то же самое для IPad, фонового изображения для верхний и нижний колонтитулы отображаются неправильно, что приводит к обрезанию фонового изображения.

Я пробовал с javascript и css, и технику после техники, но ничего не работает. Ни один из этих стилей не работает на моем WordPress website www.awebdesign.co.uk, и я больше не знаю, что делать с моим мобильным сайтом. Я пробовал overflow-x: hidden;, но не хотел ничего делать.

Пытался эти стили ниже

.header { 
    width:100%; 
    float:left; 
    height:100%; 
    display:block; 
    position:relative; 
    margin: 0 auto !important; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    z-index:10; 
}

Я тоже устали следующий за сноску, но удалил его позже, потому что ничего хорошего не делает:

footer.footer { 
    width:100%; 
    float:left; 
    height:100%; 
    display:block; 
    position:relative; 
    margin: 0 auto !important; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    z-index:10; 
}

Чем я реализованный медиа запросы,

@media only screen and (max-device-width : 480px) 
@media only screen and (max-width: 768px) 
@media only screen and (max-width: 1024px

и позже изменено на это,

@media screen and (max-width: 480px) 
@media screen and (min-width: 768px) and (max-width: 979px) 
@media screen and (min-width: 981px) and (max-width: 1024px)

Однако он отображает только начальное положение фонового изображения с левой стороны. Он не отображается правильно по горизонтальной линии, он отображается вертикально, а не горизонтально. Пожалуйста, помогите мне найти решение этой проблемы и, следовательно, научиться применять свойства фонового изображения CSS как к мобильным, так и к планшетам (портретным или альбомным).

Я думаю, что мой вопрос ясен, но если у вас есть какие-либо вопросы, не стесняйтесь спрашивать, и я надеюсь, что другие тоже найдут это полезным. Заранее спасибо!

Я удалил код CSS выше, чтобы очистить пользовательские стили, структуру документа, страницу HTML5 и классы теперь будут выглядеть примерно так:

<!doctype html> 
<html> 
<body> 
    <header class="header"> 
     <div class="container"> 
      <div class="panel_1"></div> 
     </div> 
    </header> 

    <section class="middle"> 
     <div class="container"> 
      <div class="full_width"></div> 
     </div> 

     <div class="clear"></div>   
    </section><!-- .middle --> 
    <footer class="footer"> 
     <div class="container"> 
      <div class="footer-nav"> 
      </div>  
     </div>   
    </footer> 
    </body> 
</html> 

.container { 
    width: 940px; 
    margin: 0 auto; 
} 
.container:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
.panel_1 {background:url(images/panel_0.jpg) left top no-repeat; 
      width: 940px; 
      height: 270px; /*border: 1px solid #09F;*/} 

section.middle {background: #CCC; clear: both;} 

.header { 
    background: #15181f url(images/bg-header.jpg) repeat; 
    color: #fff; 
} 
footer.footer { 
    background: #15181f url(images/bg-footer.jpg) repeat; 
    color: #fff; 
} 
footer.footer {padding: 36px 0; clear: both;} 
.footer-nav {float: left;}

источник

2015-11-17 Steven Donea

Я думаю, что вы перепутали значение cover с contain ,

Изолировать сделает ваши изображения привязываются к ширине окна просмотра и не масштабировать их, пока они не встретятся в нижней части элемента они проживающие в.

Надеются, что это помогает. =)

источник

2015-11-17 12:18:14

Привет, Марко, я изменил значение с «обложки» на «содержать», вы можете видеть его в прямом эфире, но он ничего не делает на мобильных устройствах. Благодарю. –

Css фонового изображения не отображается правильно на мобильное устройство

ответ

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