Как сделать статичным фон, чтобы только рабочее поле прокручивалось?

AE1 · 5 липня 2012

Всех приветствую, вот возникла идея как потенциально бы было можно бы было решить вопрос с фотофоном... идея какая, заморозить сам фон, чтобы при прокрутке прокручивалось только поле просмотра. Чтобы было понятней во на примере Youtube http://www.youtube.com/user/DLSRUS прокручиваешь вверх-вниз и крутится только центральная часть, а фон статичен и неподвижен... Подскажите, пожалуйста, кто делал что-то подобное? Как это можно реализовать?

kosha · 5 липня 2012

background-repeat:no-repeat;

Fizik87 · 5 липня 2012

body {background:url(КАРТИНКА) center top fixed no-repeat;}

pavelholovko · 5 липня 2012

background-attachment: fixed;

AE1 · 5 липня 2012

body {background:url(КАРТИНКА) center top fixed no-repeat;}

Спасибо большое всем откликнувшимся, особенно Fizik87 - это как раз то что нужно :) background: url('../image/PICTURENAME.jpg') center top fixed no-repeat;

AE1 · 5 липня 2012

Еще вопрос если быть может кто-то сталкивался, например если я хочу сделать фон, но не просто статичный, а скажем чтобы по низу экрана была допустим трава а по верху облака, как это задать? Это надо делать 2 разных картинки и задавать у одной параметр к верху приклеится, а у другой к низу? или как?

Допустим как тут трава внизу а сверху облака: http://ecopanel.ru/

или тут снизу и сверху поля: http://www.english-shoes.ru/products/20/

Fizik87 · 5 липня 2012

тут уже нужно смотреть на картинку (дизайн).

а потом уже желать html вывод ,а по нему уже добавлять картинки фона

AE1 · 5 липня 2012

тут уже нужно смотреть на картинку (дизайн).

а потом уже желать html вывод ,а по нему уже добавлять картинки фона

Ну вот я и хочу сделать как на сайте www.ecopanel.ru травку снизу и облака сверху, только на другом сайте...

AE1 · 6 липня 2012

Ну неужели ни кто не знает, как сделать так, чтобы фон подстраивался под разрешение? т.е. скажем взять стандартный фон размером допустим 1600*1200 а дальше, чтобы он либо сжимался либо тянулся в зависимости от экрана?

krumax · 6 липня 2012

Ну неужели ни кто не знает, как сделать так, чтобы фон подстраивался под разрешение? т.е. скажем взять стандартный фон размером допустим 1600*1200 а дальше, чтобы он либо сжимался либо тянулся в зависимости от экрана?

вот css сайта из вашей ссылки, и посмотрите как они сделали вывод хейдера и футера:


body, html {
margin: 0;
padding: 0;
font: 11px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background: #f0f4ed;
color:#4a4a4a;
}

img {border: 0;}

* {
margin: 0;
padding: 0;
}

a { color: #1e5678; text-decoration: underline; background-color: inherit; }
a:visited { color: #91908d; text-decoration:underline; background-color: inherit;}
a:active { color: #8aa12d; background-color: inherit; }
a:hover { color: #747474; background-color: inherit; }
hr{
color: #f0f4ed;
size: 1px;

}
.apage{
color:#59a219;
}
.epicture{
padding:4px 4px 0px 4px;
border:solid #daded8 1px;
}
.circle{
width:29px;
height:29px;
text-align:center;
padding-top:3px;
background:url(../images/circle.jpg) no-repeat 0px 0px;
}
.eheader{
padding-top:5px;
padding-left:10px;
}
.page {
margin: 0 auto;
text-align:center;
min-width:1200px;
background:url(../images/header_left_clouds2.jpg) no-repeat top left;
width:100%;
float:left;

}
.page-in {
background:url(../images/header_right_clouds.jpg) no-repeat top right;
width:100%;
margin: 0 auto;
}

h1 {
font-size: 16px;
}

h3 {
font-size: 13px;
}

h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.0em 0;
}

.left{
float:left;
width:11%;
}
.right{
float:right;
width:89%;
margin: 0 auto;
}
.right_i{
width:994px;
margin: 0 auto;
padding:0;
}

.footer {
position:relative;
height:186px;
width:100%;
background:white;
clear:both;
background: transparent url(../images/footer_bg.jpg) bottom center repeat-x;
min-width:1200px;
z-index: 5;
}
.footer_left{
float:left;
width:14%;
height:149px;
position:relative;
z-index: 5;
background:url(../images/leaf.jpg) no-repeat bottom left;
}
.footer_right{
float:right;
width:86%;
margin: 0 auto;
text-align:left;
min-height:55px;
/*background:url(../images/home_footer.gif) no-repeat center right;*/
padding-top:90px;
color: #7e7e7e;
z-index: 5;
position:relative;
}
#rightcut {
width:391px;
height:167px;
background:url(../images/home_footer.gif) no-repeat top left;
position: absolute;
bottom: 50px;
right: 0px;
z-index: 55;
}
.header {
height:130px;
background:url(../images/header_right_clouds.jpg) no-repeat top right;
text-align:left;
overflow:visible;
float:left;
width:100%;
}
.header_i {
height:130px;
text-align:left;
float:left;
width:100%;
position:relative;
}
.body {
width:100%;
clear:both;
}
.left_column {
width:210px;
float:left;
}
.right_column{
width:auto;
text-align:left;
margin-left:210px;
position:relative;
z-index:1;
}
.content{
text-align:left;
line-height:14pt;
font-family:arial;
font-size:9pt;
color: #4a4a4a;
padding-top:30px;
padding-left:20px;
width:862px;
float:left;
background:#F0F4ED;
overflow:hidden;
}
.content p, .content2 p { margin-left: 25px; }
.content2{
text-align:left;
line-height:14pt;
font-family:arial;
font-size:9pt;
color: #4a4a4a;
padding-top:30px;
padding-left:20px;
overflow:hidden;
float:left;
}

.content h3,.content2 h3 {
color:#8a9466;
font-size:17px;
line-height:22px;
margin:0px;
padding:0px;
}
.line {
width:25%;
height:103px;
position:absolute;
top:439px;
background:#d0eab9;
min-width:157px;
left:0px;
}
.line2 {
width:30%;
height:276px;
position:absolute;
top:130px;
z-index:0;
background:#ebefd3;
min-width:157px;
right:0px;
background: #ebefd3 url(../images/leaf2.jpg) no-repeat top right;
text-align:right;
}
.logo {
margin-top:15px;
margin-left:-60px;
float:left;
z-index:5;
position:relative;
}
.language {
margin-top:55px;
margin-left:150px;
float:left;
}
.language a, language a:visited {
color: #006fae;
}
.language a:hover {
color: #59a219;
}
.contakts {
float:left;
color:#3d3d3d;
margin-left:250px;
padding-left:15px;
padding-top:50px;
width:170px;
height:85px;
font-size:18px;
font-family:Helvetica;
background:url(../images/contakts.gif) no-repeat top left;
line-height:17px;
}
/*.title {
height: 50px;
background: #d0eab9 url(../images/title.gif) no-repeat top left;
text-align:left;
font-size:16pt;
font-family:Arial;
padding-top:21px;
padding-left:18px;
overflow:hidden;
line-height:22pt;
}
*/
.title {
height: 71px;
background: #d0eab9 url(../images/title.gif) no-repeat top left;
text-align:left;
overflow: hidden;
font-size:16pt;
font-family:Arial;
padding-left:18px;
line-height:71px;
position:relative;
}

.title h1{
font-weight:normal;
font-size:16pt;
color:#3d3d3d;
}
.green_block{
width:182px;
height:71px;
background: #d0eab9 url(../images/green_block.gif) no-repeat top left;
clear:both;
text-align:left;
color:#3d3d3d;
font-size:11px;
font-weight: bold;
text-transform:uppercase;
line-height: 18px;
}
.b {
line-height:70px;
}
.green_block a, .green_block a:visited{
color:#3d3d3d;
text-decoration:none;
}

.green_block a:hover {
text-decoration:underline;
}
.green {
color: #59a219;
}
.small_grey {
color:#969895;
font-size:11px;
padding-left:60px;
}
.main_menu {
height:237px;
float:left;
width:210px;
background:url(../images/menu_bg.gif) no-repeat top left;
margin-bottom:22px;
text-align:left;
padding-left:20px;
line-height:25px;
color:#4a4a4a;
overflow:hidden;
margin-top:50px;
font-size:12px;
}
.main_menu a, .main_menu a:visited{
color: #006fae;
}
.main_menu a:hover {
color: #59a219;
}
.main_menu ul {
list-style:none;
}
.main_menu ul, .main_menu li {
display:block;
}
.main_menu li {
padding-left:16px;
}
.active, .active a, .active a:visited {
text-decoration:none;
color:#4a4a4a;
}
.active {
padding-left:16px;
background:url(../images/menu_active.gif) no-repeat center left;
}
.country {
clear:both;
background: #d0eab9 url(../images/country.jpg) no-repeat top left;
width:339px;
height:103px;
margin-left:-165px;
margin-bottom:13px;
position:relative;
z-index:5;
overflow:hidden;
text-align:left;
font-size:9px;
line-height:10px;
padding-left:10px;
text-transform: uppercase;
}


#canada { position: absolute; z-index:6; top: 12px; left: 65px; }
#greenland { position: absolute; z-index:6; top: 31px; left: 37px; }
#norway { position: absolute; z-index:6; top: 50px; left: 50px; }
#finland { position: absolute; z-index:6; top: 12px; right: 72px;}
#shweden { position: absolute; z-index:6; top: 31px; right: 72px; }
#denmark { position: absolute; z-index:6; top: 50px; right: 72px; }
#choise {}


.country a, .country a:visited{
color:#646f34;
text-decoration:none;
background: none;
}
.country a:hover{
text-decoration:underline;
}
.r {
float:left;
position:relative;
z-index:6;
left:45px;
line-height:19px;
margin-top:6px;
}
.l {
margin-top:6px;
float:left;
overflow:hidden;
line-height:19px;
position:relative;
z-index:6;
left:140px;
}
.our_advantages {
width:182px;
height:258px;
overflow:hidden;
color:#646f34;
}
.our_advantages a, .our_advantages a:visited {
color:#646f34;
text-decoration:underline;
}
.our_advantages a:hover{
color:#3d3d3d;
text-decoration:none;
}
.our_advantages_header {
width:182px;
height:38px;
background: #eaefd3 url(../images/our_advantages_header.gif) no-repeat top left;
margin-bottom:8px;
font-size:13px;
line-height:26px;
}
.our_advantages_1, .our_advantages_2, .our_advantages_3, .our_advantages_4 {
height:36px;

margin-bottom:8px;
padding-left:60px;
text-align:left;
overflow:hidden;
padding-top:6px;
float:left;
font-size:12px;

}
.our_advantages_1 {
background: url(../images/our_advantages_1.gif) no-repeat top left;
}
.our_advantages_2 {
background: url(../images/our_advantages_2.gif) no-repeat top left;
}
.our_advantages_3 {
background: url(../images/our_advantages_4.gif) no-repeat top left;
}

.fourth {
color:#3d3d3d;
font-family:arial;
font-size:9px;
position:absolute;
z-index:6;
left:202px;
top:76px;
width: 150px;

}
.blocks {
height:104px;
width:97%;
margin-top:30px;
margin-left:7px;
}
.green_block2{
width:240px;
height:103px;
background: #d0eab9 url(../images/green_block2.gif) no-repeat top left;
text-align:left;
color:#3d3d3d;
font-size:13px;
float:left;
margin-right:4px;
margin-left:4px;
color:#59a219;
font-family:arial;
}
.green_block2 a, .green_block2 a:visited{
color:#3d3d3d;
text-decoration:none;
font-size:14px;
font-weight: bold;
text-transform: uppercase;
}

.green_block2 a:hover {
text-decoration:underline;
}
.change {
position:relative;
z-index:10;
float:right;
right:-40px;
top:20px;
}
.main_image {
background: url(../images/pr_info.png) no-repeat top left;
left:0px;
top:40px;
height: 90px;
width: 189px;
padding-top:30px;
padding-left: 1px;
position: absolute;
z-index: 91;
position:absolute;
}

.output {
border: 2px solid #000;
border-collapse:collapse;
border-style:solid;
border-color:#c0c0c0;
}
.output td {
border-width:2px;
border-color:#000;
border-style:solid;
padding: 4px;
border-color:#c0c0c0;
}

.prinfo {
border: 2px solid #000;
border-collapse:collapse;
border-style:solid;
border-color:#c0c0c0;
font-size:15px;

}
.prinfo td {
border-width:2px;
border-color:#000;
border-style:solid;
padding: 4px;
border-color:#c0c0c0;
}
.outputdiv { border-left:2px solid #C0C0C0; border-right:2px solid #C0C0C0; border-top:2px solid #C0C0C0;
width:264px; float:left; clear:both;
overflow: hidden;
}

.squareval {
padding-left: 4px;
float: left;
}
#dom {
height:276px;
width: 761px;
background-color: #F0F4ED;
position:relative; z-index:1;
}
.square {float:left; overflow: hidden; height:25px; width:178px; padding:4px; font-size:11pt; line-height:25px; color:#4A4A4A; border-right:2px solid #C0C0C0;}
.output { float:left; clear:both; }
.char { height:25px; width:300px; padding:4px; padding-left: 15px; font-size:11pt; line-height:25px; color:#4A4A4A; font-weight:bold; border-right:0px solid #C0C0C0;}
.project_list { padding-left: 140px; }
.project_list li { list-style:none; float:left; margin-left: 15px; margin-right: 15px;}
.img {margin-left: 10px;}
.search { float:right; margin-right:20 px; font-size: 14; left:320px; position:absolute; top:0; z-index:5;}

и сделайте по аналогии.

krumax · 6 липня 2012

Оратите внимание на эти участки кода:


.page {
margin: 0 auto;
text-align:center;
min-width:1200px;
background:url(../images/header_left_clouds2.jpg) no-repeat top left;
width:100%;
float:left;

}
.page-in {
background:url(../images/header_right_clouds.jpg) no-repeat top right;
width:100%;
margin: 0 auto;
}

и на эти:


.footer {
position:relative;
height:186px;
width:100%;
background:white;
clear:both;
background: transparent url(../images/footer_bg.jpg) bottom center repeat-x;
min-width:1200px;
z-index: 5;
}
.footer_left{
float:left;
width:14%;
height:149px;
position:relative;
z-index: 5;
background:url(../images/leaf.jpg) no-repeat bottom left;
}
.footer_right{
float:right;
width:86%;
margin: 0 auto;
text-align:left;
min-height:55px;
/*background:url(../images/home_footer.gif) no-repeat center right;*/
padding-top:90px;
color: #7e7e7e;
z-index: 5;
position:relative;
}

AE1 · 7 липня 2012

Оратите внимание на эти участки кода:


.page {
margin: 0 auto;
text-align:center;
min-width:1200px;
background:url(../images/header_left_clouds2.jpg) no-repeat top left;
width:100%;
float:left;

}
.page-in {
background:url(../images/header_right_clouds.jpg) no-repeat top right;
width:100%;
margin: 0 auto;
}

и на эти:


.footer {
position:relative;
height:186px;
width:100%;
background:white;
clear:both;
background: transparent url(../images/footer_bg.jpg) bottom center repeat-x;
min-width:1200px;
z-index: 5;
}
.footer_left{
float:left;
width:14%;
height:149px;
position:relative;
z-index: 5;
background:url(../images/leaf.jpg) no-repeat bottom left;
}
.footer_right{
float:right;
width:86%;
margin: 0 auto;
text-align:left;
min-height:55px;
/*background:url(../images/home_footer.gif) no-repeat center right;*/
padding-top:90px;
color: #7e7e7e;
z-index: 5;
position:relative;
}

Спасибо! Пока решил одной картинкой на весь фон ограничится :)

Вхід

Как сделать статичным фон, чтобы только рабочее поле прокручивалось?

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information