2014-09-07 3 views
-1

Я хотел бы спросить, можно ли оставить одно и то же фоновое изображение, скользя по моему webpage (используя значки изображений). Я хотел сохранить фон с главной страницы (как-то исправить ее там) и просто сделать контент «скольжением по нему». Я использовал метод this jquery - javascript для создания слайдов.Как сохранить один и тот же фон на горизонтально раздвижной сети?

использовали эти старые функции JQuery для скольжения:

/* jQuery.ScrollTo 
/* jQuery.LocalScroll 
/* Fire Horizontal Scroll */ 

(полный код на связанной странице)

«горки» 9-помещаются в обертке. Первая - главная.

<body> 

    <div id="wrap"> 
    <div id="one"><p>ONE</p></div> 
    <div id="two"><p>TWO</p> <a href="#one">« HOME </a> </div> 
    <div id="three"><p>THREE</p> <a href="#one">« HOME </a> </div> 
    <div id="four"><p>FOUR</p> <a href="#one">« HOME </a> </div> 
    <div id="five"><p>FIVE</p> <a href="#one">« HOME </a> </div> 
    <div id="six"><p>SIX</p> <a href="#one">« HOME </a> </div> 
    <div id="seven"><p>SEVEN</p> <a href="#one">« HOME </a> </div> 
    <div id="eight"><p>EIGHT</p> <a href="#one">« HOME </a> </div> 
    <div id="nine"><p>NINE</p> <a href="#one">« HOME </a> </div> 
    </div> 

Вот интересная часть CSS

#wrap { 
min-height: 100%; 
width: 900%; 
overflow: hidden; 
} 

#one, #two, #three, #four, #five, #six, #seven, #eight, #nine { 
width: 11.1%; 
float: left; 
text-align: center; 
} 

* html {background:url(images/mainfull.jpg)} 
* html #full {height:100%;} 

Спасибо за помощь

+0

Просьба включить соответствующий код HTML/JS в сообщение. Читатели вашего вопроса обычно не любят копаться через связанные сайты, чтобы найти соответствующий код. – honk

ответ

0

[РЕШИТЬ] Все, что вам нужно сделать, это изменить положение фона с фиксированным вместо абсолютной.

.background-image { 
    background: url(images/mainfull.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    position: fixed; 

    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    opacity: 0; 

    -webkit-animation-name: fade-in; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-delay: 3s; 

    -moz-animation-name: fade-in; 
    -moz-animation-duration: 1s; 
    -moz-animation-timing-function: ease-in; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-delay: 3s; 

    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -animation-fill-mode: forwards; 

    background-image: url('images/mainfull.jpg'); 
    background-position: center center fixed; 
    background-repeat: no-repeat; 
} 

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

  • Нет связанных вопросов^_^