Перейти к содержанию

Рекомендуемые сообщения

Доброго времени суток!

 

Требуется решить сдующую задачу:

 

Есть фон, который формируется мощением картинки (дабы трафик не кушать);

требуется поверх фона расположить 2 изображения в определенных местах,

и уже поверх всего этого отображать контент.

 

Ранее было реализовано с помощью одной большой картинки содержащей и фон и требуемые изображения, но это все много вестит и требуется оптимизация.

 

По факту я понимаю, что требуется добавить пару div'ов перед контентом, однако на деле получается, что контент отображается за добавленными дивами.

 

Прилогаю краткий листинг того что делаю:

 

stylesheet.css

body

{

...

background: url('../image/f5.jpg');

...

}

 

#fon1
{
    position:absolute;
    width:400px;
    height:477px;
    background: url('../image/fon1.png');
}

 

В header.tpl вставяю в самом начале, после <body>

<div id="fon1"></div>

 

Но контент все равно отобразается за этими дивами!

 

Пробовал решать через z-index - ни к чему не привело (

 

 

Если требуется еще что-то - пишите скину.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

приложите лучше ссылку

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В сети нету, только на локальном

3e7593fcae7c28a5d62c4e04dc891762.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Ранее было реализовано с помощью одной большой картинки содержащей и фон и требуемые изображения, но это все много вестит и требуется оптимизация.

 

 

то есть три подгружаемые картинки спасут оптимизацию больше, чем  такая же суммированная одна?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

то есть три подгружаемые картинки спасут оптимизацию больше, чем  такая же суммированная одна?

 

Фон теперь моститься, а не одна большая картинка.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

#fon1
{
position:absolute;

z-index: -1;
width:400px;
height:477px;
background: url('../image/fon1.png');
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

#fon1

{

position:absolute;

z-index: -1;

width:400px;

height:477px;

background: url('../image/fon1.png');

}

 

А вот что он отрицательным может быть я правда не знал(

 

Спасибо! Все вроде получилось!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.