Две фоновых картинки (вверху и внизу)

rgl · April 28, 2015

Нужно сделать так, чтобы вверху странички была одна фоновая картинка, а внизу - другая. Посмотрел, поискал где и как это сделано, не нашел ничего лучше чем так:

<body style="background:url('img_bottom.jpg') no-repeat bottom middle">  <div style="background:url('img_top.jpg') no-repeat top middle">    тут содержимое странички  </div></body>

Вопросы:

1. Почему в примерах, что я нашел, во внешнем контейнере задается нижняя фоновая картинка, а во внутреннем - верхняя, а не наоборот? Так чем-то лучше или совершенно безразлично?

2. Есть ли более простой способ задать две фоновый картинки?

З.Ы.

не middle а center, спасибо!

Edited April 28, 2015 by rgl

satantx · April 28, 2015

1. Совпадение. Делайте, как считаете нужным

2. А это не простой?

swandev · April 28, 2015

2. Есть ли более простой способ задать две фоновый картинки?

background: url(path/to/image1.jpg) no-repeat center top, url(path/to/image2.jpg) no-repeat center bottom;

rgl · April 28, 2015

2. Есть ли более простой способ задать две фоновый картинки?
background: url(path/to/image1.jpg) no-repeat center top, url(path/to/image2.jpg) no-repeat center bottom;

Так не работает, в хоумсайте показывается только первая картинка, в хроме - вообще никакая

Edited April 28, 2015 by rgl

swandev · April 28, 2015

2. Есть ли более простой способ задать две фоновый картинки?
background: url(path/to/image1.jpg) no-repeat center top, url(path/to/image2.jpg) no-repeat center bottom;
Так не работает, в хоумсайте показывается только первая картинка, в хроме - вообще никакая

Странно, должно работать.

http://htmlbook.ru/css/background

http://jsbin.com/pisunonaso/1/edit

afdw · April 28, 2015

http://jsfiddle.net/7cvfqqge/

rgl · April 28, 2015

2. Есть ли более простой способ задать две фоновый картинки?
background: url(path/to/image1.jpg) no-repeat center top, url(path/to/image2.jpg) no-repeat center bottom;
Так не работает, в хоумсайте показывается только первая картинка, в хроме - вообще никакая
Странно, должно работать.
http://htmlbook.ru/css/background
http://jsbin.com/pisunonaso/1/edit

Да, работает и в хроме, и в мозиле и в ие, не знаю почему сначала показалось что не работает, может какая опечатка. Но (к сожалению) в хоумсайте не работает. Ничего страшного, терпимо (если об этом знать).

Плюс, в хоумсайте надо сначала указывать вертикаль, потом горизонталь, т.е. только "top center" но не "center top".

Всем спасибо.

afdw · April 28, 2015

хоумсайте

Что это?

rgl · April 28, 2015

хоумсайте
Что это?

https://ru.wikipedia.org/wiki/Macromedia_HomeSite

afdw · April 28, 2015

хоумсайте
Что это?

https://ru.wikipedia.org/wiki/Macromedia_HomeSite

И зачем же вы его используете? Последняя версия вышла в 2003 году!

rgl · April 28, 2015

2. Есть ли более простой способ задать две фоновый картинки?
background: url(path/to/image1.jpg) no-repeat center top, url(path/to/image2.jpg) no-repeat center bottom;
Так не работает, в хоумсайте показывается только первая картинка, в хроме - вообще никакая
Странно, должно работать.
http://htmlbook.ru/css/background
http://jsbin.com/pisunonaso/1/edit
Да, работает и в хроме, и в мозиле и в ие, не знаю почему сначала показалось что не работает, может какая опечатка. Но (к сожалению) в хоумсайте не работает. Ничего страшного, терпимо (если об этом знать).
Плюс, в хоумсайте надо сначала указывать вертикаль, потом горизонталь, т.е. только "top center" но не "center top".
Всем спасибо.

Ага, понял почему сначала не работало, и сейчас не работает если дополнительно указать ЦВЕТ фона, т.е. сверху картинка, внизу картинка, а место, не занятое картинками должно быть определенного цвета. Это возможно без вложенного дива?

http://jsfiddle.net/7cvfqqge/1/

P.S.

Ага, нашел, если отдельно задавать то все ОК

http://jsfiddle.net/7cvfqqge/4/

хоумсайте
Что это?

https://ru.wikipedia.org/wiki/Macromedia_HomeSite

И зачем же вы его используете? Последняя версия вышла в 2003 году!

Я к нему привык, версткой никогда серьезно не занимался, а когда надо что-то разово сделать на коленках раз в пару лет, пользуешься тем, что уже есть, т.к. поиск что там сейчас считается современным плюс установка может занять больше времени, чем сделать вообще без всяких инструментов.

Edited April 28, 2015 by rgl

swandev · April 28, 2015

P.S.
Ага, нашел, если отдельно задавать то все ОК
http://jsfiddle.net/7cvfqqge/4/

Можно короче: http://jsfiddle.net/7cvfqqge/5/

Sign In

Две фоновых картинки (вверху и внизу)

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information