2015-01-07 2 views
1

Мне нужна помощь при отображении моего фона на мобильных устройствах, текущий код работает в моем браузере, но когда я нахожу его на мобильном устройстве, фон сканируется вверх и не отображается , также div для другого изображения не реагирует на% i. (Мне действительно нужно использовать проценты, потому что это сделает сайт лучше для любого мобильного устройства)Фоновый рисунок CSS не отображается на мобильных устройствах

У меня был этот код, но он был не в CSS, а сделан в самом HTML, теперь я хочу использовать CSS, потому что вы можете не загружать фон больше как изображение.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="favicon" type="image/ico" href="favicon.ico"/> 
 
<title>Rolling Barrel :: Sport & Game</title> 
 
<meta name="description" content="De Rolling Barrel is een revolutionair idee waarmee sporten & gamen een compleet nieuwe dimensie krijgt."> 
 
<style> 
 
body#background { 
 
\t background: url('background.jpg') no-repeat center center fixed; 
 
\t background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t -webkit-background-size: cover; 
 
\t background-color: #e0e0e0; 
 
\t background-size: 100% 100%; 
 
} 
 

 
div { 
 
\t position: absolute; 
 
\t top: 20%; 
 
\t left: 11%; 
 
\t width: 37%; 
 
\t height: 70%; 
 
\t overflow-y: scroll; 
 
\t overflow-x: hidden; 
 
} 
 

 
div img { 
 
\t width: 100%; 
 
} 
 
</style> 
 
</head> 
 
<body id="background"> 
 
<div> 
 
    <img src="text.png" alt=""/> 
 
</div> 
 
</body> 
 
</html>

Я использовал свой Android телефон для просмотра сайта кстати. Надеюсь, кто-то может мне помочь или дать толчок в правильном направлении.

спасибо!

ответ

0

Либо просто поместите атрибут background-image на #background или просто поместите его на кузове (в css), не нужно для обоих. Я понимаю, что вы можете захотеть содержать изображение, и в этом случае вы можете просто использовать имя элемента (#background) и установить переполнение на none, если изображение истекает кровью.

Если у вас есть еще вопросы или вам нужна помощь, просто напишите комментарий, и я создам для вас JS Fiddle.

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