Вопрос Помогите одолеть Параллакс

Пользователь · Регистрация: 09.10.2012

Доброго дня.

Есть сайт в разработке. Захотел сделать фон вот от сюда Прокручивающийся произвольно фон » Скрипты для сайтов.

Как сделать, чтобы этот фон был позади всего.

Вот мой style:

body {
background-color: #3e2e49;

background-image: url(../images/glavfon.png);

background-repeat: no-repeat;
background-size: 915px 1600px;
background-position: center;
margin: 0;
padding: 0;
margin-top:0px;

}

.navigation{
position:relative;
left: 6px;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-shadow: 0 1px 1px #fff;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor

ointer;
}
ul.menu li span.monitor{
background-image:url(../images/icons/glavn.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(../images/icons/uslugi.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(../images/icons/galereya.png);
left:293px;
}
ul.menu li span.ipod{
background-image:url(../images/icons/zakaz.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(../images/icons/kontakt.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(../images/icons/antibanner.png);
left:683px;
}
ul.menu li span.print{
background-image:url(../images/icons/opili.png);
left:813px;
}

.logomogo{
margin-left:300px;

}

Администратор · Регистрация: 27.02.2009

Ну если в двух словах, то к тегу body приделать идентификатор #container
<body id="container">

А дальше править css и фотку

Пользователь · Регистрация: 09.10.2012

Я в этом деле не силён. Не могли бы вы по подробнее объяснить. Заранее спасибо.

Администратор · Регистрация: 27.02.2009

давайте в сборе index.html и .css к нему и фон который должен быть...

Пользователь · Регистрация: 09.10.2012

вот index

Цитата:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
{headers}

<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/screen.css" type="text/css" rel="stylesheet" />

<script src="{THEME}/js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="{THEME}/js/libs.js"></script>

<script type="text/javascript" src="{THEME}/js/navi.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="{THEME}/js/easySlider1.7.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>

</head>
<body>

{AJAX}

<div class="logomogo">

<a href="http://dust-free.ru"><img src="{THEME}/images/logo.png" alt=""/></a>

</div>

<center>
<table>

<tr>

<td>
<div class="navigation">
<ul class="menu" id="menu">
<li><span class="monitor"></span><a href="">Главная</a></li>
<li><span class="video_camera"></span><a href="">Услуги</a></li>
<li><span class="television"></span><a href="">Галерея</a></li>
<li><span class="ipod"></span><a href="">Заказ</a></li>
<li><span class="toolbox"></span><a href="">Контакты</a></li>
<li><span class="telephone"></span><a href="">АнтиБаннер</a></li>
<li><span class="print"></span><a href="">О пыли</a></li>
</ul>
</div>
</td>

</tr>
</table>
</center>

<center>
<p style="margin-top:40px">
<table algin="center" background="{THEME}/images/gorizont1.png" width="825" height="234">
<tr>
<td>
<center>
<div id="content">
<div id="slider">
<ul>
<li><a href="#"><img src="{THEME}/images/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="{THEME}/images/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="{THEME}/images/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="{THEME}/images/04.jpg" alt="" /></a></li>
<li><a href="#"><img src="{THEME}/images/05.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</center>
</td>
</tr>
</table>
</p>
</center>

<center>
<table>
<tr>
<td algin="left" background="{THEME}/images/vertcen.png" width="823" height="847">{content}</td>

</tr>
</table>
</center>

</body>
</html>

Вот style

Цитата:

body {
background-color: #3e2e49;

background-image: url(../images/glavfon.png);

background-repeat: no-repeat;
background-size: 915px 1600px;
background-position: center;
margin: 0;
padding: 0;
margin-top:0px;

}

.navigation{
position:relative;
left: 6px;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-shadow: 0 1px 1px #fff;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor

ointer;
}
ul.menu li span.monitor{
background-image:url(../images/icons/glavn.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(../images/icons/uslugi.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(../images/icons/galereya.png);
left:293px;
}
ul.menu li span.ipod{
background-image:url(../images/icons/zakaz.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(../images/icons/kontakt.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(../images/icons/antibanner.png);
left:683px;
}
ul.menu li span.print{
background-image:url(../images/icons/opili.png);
left:813px;
}

.logomogo{
margin-left:300px;

}

Добавлено через 2 минуты
А фон меня полностью устраивает вот отсюда Прокручивающийся произвольно фон » Скрипты для сайтов

Пользователь · Регистрация: 09.10.2012

Всю голову сломал. Чё-то никак.

Пользователь · Регистрация: 09.10.2012

С положением разобрался.

Пользователь · Регистрация: 11.01.2014

Подскажите тяжело победить Параллакс ? Хотел вывести в буквах изменение фона
я согласно теме внес изменения в хеадер

<?php
global $woo_options;
global $woocommerce;
global $theretailer_theme_options;
?>

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html <?php language_attributes(); ?>> <!--<![endif]--><head>

<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

<title><?php wp_title( '|', true, 'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<!-- ******************************************************************** -->
<!-- ************************ Custom Favicon **************************** -->
<!-- ******************************************************************** -->

<link rel="shortcut icon" href="<?php if ($theretailer_theme_options['favicon_image']) { echo $theretailer_theme_options['favicon_image']; ?>
<?php } else { ?><?php echo get_template_directory_uri(); ?>/favicon.png<?php } ?>" />

<!-- ******************************************************************** -->
<!-- ******************** Custom Retina Favicon ************************* -->
<!-- ******************************************************************** -->

<link rel="apple-touch-icon-precomposed" href="<?php if ($theretailer_theme_options['favicon_retina']) { echo $theretailer_theme_options['favicon_retina']; ?>
<?php } else { ?><?php echo get_template_directory_uri(); ?>/apple-touch-icon-precomposed.png<?php } ?>" />

<!-- ******************************************************************** -->
<!-- *********************** Custom Javascript ************************** -->
<!-- ******************************************************************** -->

<?php echo $theretailer_theme_options['custom_js_header']; ?>

<!-- ******************************************************************** -->
<!-- *********************** WordPress wp_head() ************************ -->
<!-- ******************************************************************** -->
<link rel="stylesheet" type="text/css" media="screen" href="/wp-content/themes/theretailer/images/style.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/theretailer/js/custom.js"></script>
<script type="text/javascript" src="/wp-content/themes/theretailer/js/pngFix.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('.png-fix');
</script>
<?php wp_head(); ?>
</head>

в HTML

    <div id="container2">
    <div id="overlay2" class="png-fix">
         <div id="logo">
           <a href="#" title="Логотип">
              <img src="/wp-content/themes/theretailer/images/pcvector.png" alt="logo pcvector" class="png-fix" />
           </a>
         </div>
    </div>
</div>

и CSS

body {font-family:Lucida Sans Unicode, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#444;}

a img {border:none;}

#wrapper {width:900px;margin:0px auto;padding:0 0 20px 0;}

h3 {color:#396A88;font-size:1.6em;}
h6 {color:#888;font-size:1.2em;padding:0;margin:0;font-family:georgia, Times New Roman, Times, Serif;font-style:italic;}

p {width:600px;}

#container {
  background:url(../wp-content/themes/theretailer/images/gradient.jpg);
  position:relative;
  width:899px;
  height:358px;
}

#overlay {
  position:absolute;
  top:0;
  left;0;
  width:899px;
  height:358px;
  background:url(../wp-content/themes/theretailer/images/overlay.png);
}
#container2 {
  background:url(../wp-content/themes/theretailer/images/gradient.jpg);
  position:relative;
  width:640px;
  height:100px;
}
div#title {text-align:right;font-size:140px;font-weight:bold;font-family:Arial, Helvetica, Verdana, sans-serif;letter-spacing:-10px;color:#fff;line-height:105px;padding:110px 10px 0 0;}

#overlay2 {
  position:absolute;
  top:0;
  left;0;
  width:640px;
  height:100px;
  background:url(../wp-content/themes/theretailer/images/overlay.png);
}
#logo {
  position:absolute;
  top:0;
  left;0;
  width:640px;
  height:100px;
}

pre {padding:20px;background:#f2f2f2;font-weight:bold;width:600px;}
div.note {padding:10px 20px 10px 20px;background:#f2f2f2;font-weight:normal;width:600px;}
div.note h3 {padding:0;margin:0;color:#e00000;}
span.red {color:#e00000;}
span.grey {color:#999;}

http://тэссэра.рф/

JS - загрузил в папку для JS
Отдельный файл с СSS загрузил в Images с картинками градиента , прозрачных букв. Соединил их .
Но незнаю почему не хочет работать Вывеска сама (поставил взамен Лого) , подскажите как исправить ?

Как правильно подключить JS для вордпресса ? Моя аська 660704990

Пользователь · Регистрация: 11.01.2014

разобрался ) проблема была в правильном подключении CSS , а затем Скриптов.

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вопрос Помогите	dimaggh	Вопросы по vBulletin 3.х	3	29.08.2012 12:40
Вопрос помогите	Xedkpab	Вопросы по vBulletin 4.х	2	18.08.2012 16:17
Проблема Помогите	Remak3R	Защита, безопасность	2	01.07.2012 18:24
Проблема Помогите	SnejoK	Вопросы по vBulletin 3.х	15	22.04.2012 15:17
Проблема Помогите пожалуйста )))	legioner	Флейм	0	13.07.2010 21:20

Vector #2
7630 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,302 Сказал(а) спасибо: 578 Спасибок 2,623 в 1,832 сообщениях	Re: Помогите одолеть Параллакс - 09.10.2012, 21:35 Ну если в двух словах, то к тегу body приделать идентификатор #container <body id="container"> А дальше править css и фотку

mirkhazov #3
00 МГц Пользователь Вес репутации: 0 Регистрация: 09.10.2012 Сообщений: 5 Сказал(а) спасибо: 0 Спасибок 0 в 0 сообщениях	Re: Помогите одолеть Параллакс - 10.10.2012, 15:07 Я в этом деле не силён. Не могли бы вы по подробнее объяснить. Заранее спасибо.

Vector #4
7630 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,302 Сказал(а) спасибо: 578 Спасибок 2,623 в 1,832 сообщениях	Re: Помогите одолеть Параллакс - 10.10.2012, 22:03 давайте в сборе index.html и .css к нему и фон который должен быть...

mirkhazov #6
00 МГц Пользователь Вес репутации: 0 Регистрация: 09.10.2012 Сообщений: 5 Сказал(а) спасибо: 0 Спасибок 0 в 0 сообщениях	Re: Помогите одолеть Параллакс - 15.10.2012, 19:19 Всю голову сломал. Чё-то никак.