Форум Сайтостроение Веб-строительство

Фиксированный фон с прокруткой ленты

K1
На сайте с 15.11.2014
Offline
158
karen1994
668

Добрый вечер уважаемые вебмастера!

Я к вам вот по какому вопросу, как сделать вот такой фиксированный фон как на этом сайте railwayman.com.ua у меня на сайте? Если можете подскажите что исправить в css пожалуйста:( Пробовал поставить другой фон и прописать no repeat, но картинка сверху та что нада, а ниже стандартный фон(( Очень нужно ваша помощь:no:

GA
На сайте с 16.06.2013
Offline
61
Green arrow
#1

а открыть исходный код странички и глянуть стили, не?

добавляете картинку как background к <body>

и используете 


background-attachment: fixed; // то что вы хотели, фон закреплён
background-image: url("адрес картинки");
background-position: center top; // определяет положение, выравнивание фона - по центру и верх страницы
background-repeat: no-repeat; // не повторять
HiNeX
На сайте с 12.12.2011
Offline
24
HiNeX
#2

Green arrow, можно еще:

background-size: cover;

добавить и тогда он растянет фон по всей ширине\высоте чтоб полос не было:)

K1
На сайте с 15.11.2014
Offline
158
karen1994
#3
Green arrow:
а открыть исходный код странички и глянуть стили, не?
добавляете картинку как background к <body>
и используете 

background-attachment: fixed; // то что вы хотели, фон закреплён

background-image: url("адрес картинки");

background-position: center top; // определяет положение, выравнивание фона - по центру и верх страницы

background-repeat: no-repeat; // не повторять

У меня вот так выгледит фон:

body {
font: normal 12px Arial, Helvetica, sans-serif;
background: #284966 url(../images/body-bg.jpg) top center;
color: #000000;
height: 100%;
width: 100%;
}

Подскажите что исправить или как будет выглядеть в готовом виде?

HiNeX
На сайте с 12.12.2011
Offline
24
HiNeX
#4
karen1994:
У меня вот так выгледит фон:

Подскажите что исправить или как будет выглядеть в готовом виде?

body {

font: normal 12px Arial, Helvetica, sans-serif;

background: #284966 url(../images/body-bg.jpg) top center no-repeat;

background-size: cover;

color: #000000;

height: 100%;

width: 100%;

}

попробуйте так

K1
На сайте с 15.11.2014
Offline
158
karen1994
#5
HiNeX:
body {

font: normal 12px Arial, Helvetica, sans-serif;

background: #284966 url(../images/body-bg.jpg) top center no-repeat;

background-size: cover;

color: #000000;

height: 100%;

width: 100%;

}


попробуйте так

Все в пикселях... через чур растянуло(( Вот сейчас я по стандартному коду тот что стоял установил другой он и он повторяется(( гляньте сами - www.base-road.ru

как сделать что бы фон зафиксированный был, а лента прокручивалась... Сайт примера выше кидал(( Помогите плз(

ВКонтакте обновил ретаргетинг для Я.Маркет позволил магазинам уточнять Трафареты, которые Яндекс недавно
HiNeX
На сайте с 12.12.2011
Offline
24
HiNeX
#6
karen1994:
Все в пикселях... через чур растянуло(( Вот сейчас я по стандартному коду тот что стоял установил другой он и он повторяется(( гляньте сами - www.base-road.ru
как сделать что бы фон зафиксированный был, а лента прокручивалась... Сайт примера выше кидал(( Помогите плз(

Ох, забыл строчку добавить. 

body {

font: normal 12px Arial, Helvetica, sans-serif;

background: #284966 url(../images/body-bg.jpg) top center;

background-size: cover;

background-attachment: fixed;

color: #000000;

height: 100%;

width: 100%;

}
K1
На сайте с 15.11.2014
Offline
158
karen1994
#7
HiNeX:
Ох, забыл строчку добавить. 

body {

font: normal 12px Arial, Helvetica, sans-serif;

background: #284966 url(../images/body-bg.jpg) top center;

background-size: cover;

background-attachment: fixed;

color: #000000;

height: 100%;

width: 100%;

}

Вах🍿 Просто супер) Спс)

GA
На сайте с 16.06.2013
Offline
61
Green arrow
#8
HiNeX:
Green arrow, можно еще: 
background-size: cover;

добавить и тогда он растянет фон по всей ширине\высоте чтоб полос не было:)

при желании можно, но задачи такой он не ставил, да и не всегда это хорошо смотрится ;)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий