1

Вопрос по css, browser, mobile, image, background – CSS - фоновые изображения не отображаются должным образом в мобильных браузерах

Фоновые изображения веб-сайта I 'я работаю над (http://tinyurl.com/ax68brt) неправильно отображаются в браузерах мобильных телефонов. Проблема возникает с div-файлами outheader, outbeurzen и outtwitter. Фон заголовка не отображается при ширине 100%, и фоны для div'ов outbeurzen / outtwitter также не отображаются должным образом.

Что здесь не так?

Html:

Css:

#outheader {
background-image: url(images/achtergrond/header.jpg);
float: left;
height: 660px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0px;
margin: 0px;
padding: 0px;}

    #outintro {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: auto;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
padding-top: 60px;
padding-bottom: 60px;
    }

    #outbeurzen {
background-image: url(images/achtergrond/beurzen.jpg);
float: left;
height: 315px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% -300px;
    }

    #outfoto {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: auto;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
margin-bottom: 70px;
margin-top: 70px;
    }

    #outtwitter {
background-image: url(images/achtergrond/twitter.jpg);
float: left;
height: 315px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50%;
font-family: 'Roboto Condensed', sans-serif;
    }

    #outfooter {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: 240px;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
    }

2ответа

0

дать метатег в части заголовка HTML.

 
 
5

Ты не должент использоватьbackground-attachment: fixed; в мобильных браузерах этоглючит и перекраска обходится слишком дорого. См. Например

Android / Mobile Webkit CSS Background-Attachment: исправлено Не работает? или же

https://twitter.com/paul_irish/status/306818591196602368

Вы'также отсутствует (Тэг Viewport meta) на вашем сайте, смотритеhttps://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

RelatedQuestions