2015-08-07 2 views
-4

Я бы хотел, чтобы мой фон прокручивался медленнее, чем содержимое моей страницы. Мой фон в моем теле. Нет в div-классе «stuff» Пожалуйста, не отмечайте это как «кто-то уже спросил об этом», поскольку я смотрел на них, и они не работали для меня. Я думаю, что это более старая версия HTML или JavaScript. Не уверен, хотя Если вы думаете, что есть проблема, вот мой кодЯ хочу, чтобы мой фон прокручивался медленнее, чем мой контент

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Website</title> 

     <link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" /> 
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" /> 
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" /> 
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /> 
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" /> 
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" /> 
<meta name="application-name" content="&nbsp;"/> 
<meta name="msapplication-TileColor" content="#FFFFFF" /> 
<meta name="msapplication-TileImage" content="mstile-144x144.png" /> 
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" /> 
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" /> 
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" /> 
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" /> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
<script src="myscripts.js"></script> 
    </head> 
    <body> 
     <br> 
     <div class = "navbar"> 

     &nbsp;&nbsp; 
     <iframe  src="http://free.timeanddate.com/clock/i4sgdhg1/n103/fn4/fs16/fc00f/tct/pct/ahl/ avt/ftb/bas3/bat0/bac00f/pa8/tt0/tw1/th2/ta1/tb4" frameborder="0"   width="198"height="56" allowTransparency="true"></iframe> 

     </div> 
      <div class = "stuff"> 
     <center> 
      <br><br> 
     Content Not Yet Added... :(
     </body> 
     </div> 
     <div class = "footer"> 
      <br> 
      <br> 
     </div> 
    </center> 
</html> 

CSS:

body { 
background-image: url("background.jpg"); 
background-color: orange; 
background-attachment: fixed; 
} 


.stuff{ 
padding-top: 40px; 
padding-bottom: 40px; 
position: inherit; 
height: auto; 
width:100%; 
} 


.navbar{ 
margin-top: -10px; 
z-index: 1; 
height: 9%; 
position:fixed; 
width: 98.7%; 
background: rgba(255, 0, 0, 0.21); 
margin-bottom: 20%; 
} 


.footer { 
width: 640px; 
margin: 0% -320px; 
height:44px; 
position: fixed; 
left: 50%; 
bottom: 0%; 
background: rgba(255, 0, 0, 0.2); 
} 

JavaScript:

/* not written yet */ 
+4

Каков ваш вопрос? В чем проблема? Почему вы включили раздел JavaScript, если нет кода? – j08691

+0

Посмотрите на заголовок спасибо – AHolasek

+0

Я хочу, чтобы мой фон прокручивался медленнее, чем содержимое моей страницы – AHolasek

ответ

2

Это может установить Вас на правильный трек. Посмотрите «параллакс скроллинга»

Вот сайт с демо:

http://www.creativebloq.com/web-design/parallax-scrolling-1131762 

Для начала, проверить этот учебник (Это не может быть именно то, что вам нужно, но вы получите картину):

https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/ 

Удачи :)

+0

спасибо. Наконец, кто-то, кто действительно хочет исправить мою проблему – AHolasek

+0

Если вы довольны ответом, пожалуйста, примите его :) –

+0

Однако, не совсем то, что я искал – AHolasek

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