Несколько фоновых изображений на CSS

CSS, HTML, Вопросы и ответы
28 февраля 2012

Вопрос

Подскажите пожалуйста, возможно ли назначить одному элементу 2 фоновых изображения? Мне бы хотелось, чтобы одна картинка повторялась по горизонтали, а другая - через всю страницу и при этом была позади той, которая повторяется по-горизонтали.

Сейчас я делаю так: одну картинку назначаю фоновой для тега html, а другую для тега body.

html {
    background: url(images/bg.png);
}
body {
    background: url(images/bgtop.png) repeat-x;
}

Является ли такой подход правильным? Что, если я захочу 3 картинки? Возможно, есть метод получше?


Ответ №1

CSS3 позволяет делать такие вещи, это будет выглядеть следующим образом:

body {
    background-image: url(images/bgtop.png), url(images/bg.jpg);
    background-repeat: repeat-x, repeat;
}

Ниже пример который отображает подобный код. Обратите внимание, что на первое место выдвигается та картинка, которая указана первой.

Пример

Современные версии всех браузеров нормально воспримут такой код, однако если Вам необходима поддержка IE8 и ниже, тогда лучший способ добиться такого эффекта - добавить дополнительные div-ы:

<body>
    <div id="bgtopdiv">
        Здесь контент
    </div>
</body>
body{
    background-image: url(images/bg.png);
}
#bgtopdiv{
    background-image: url(images/bgtop.png);
    background-repeat: repeat-x;
}
Пример

2 комментария

  • Catsnameshep:

    Нашла кошечку не знала как её назвать. Нашла здесь names for siamese cats http://allcatsnames.com/good-names-for-siamese-cats полный список имен для котов.

  • mamaeka:

    Tips cara mengatasi dan menghilangkan rasa ngantuk. Sebagian orang susah untuk tidur dan sebagian lagi malah terlalu banyak tidur. Biasanya penderita kantuk berlebihan disebabkan oleh pola tidur yang salah ataupun tidak tepat. Misalnya saja sering begadang di malam hari, lelah karena seharian beraktifitas yang berat, bosan, ataupun karena faktor bawaan.Bagi anda yang memiliki rasa kantuk yang berlebihan, berikut ini ada beberapa cara mengatasi ngantuk untuk membantu anda tetap segar bugar saat beraktifitas.Cara menghilangkan rasa ngantuk diantaranya adalah:В Tidur yang cukupCara mengatasi ngantuk yang pertama yaitu dengan tidur yang cukup. Usahakanlah untuk menghentikan kebiasaan begadang anda di malam hari dan mulailah untuk tidur 8 jam sehari. Biasakan untuk tidur pada jam 9 malam, karena pada waktu tersebut merupakan waktu yang optimal untuk tidur. Tidak hanya mengatasi rasa ngantuk di pagi hari, tidur yang cukup juga dapat menghilangkan berbagai penyakit lainnya seperti stres, darah tinggi dan beberapa penyakit lainnya.В Minum kopi atau tehCara menghilangkan rasa ngantuk yang paling instan dan mujarab ialah dengan meminum secangkir kopi ataupun teh hangat. Kopi maupun teh terbukti mampu menghilangkan rasa ngantuk karena didalamnya mengandung zat kafein yang dapat menstimulasi otak agar segar kembali. Tapi, perlu anda ingat bahwa kebanyakan meminum kopi akan berimplikasi ke berbagai macam penyakit lainnya terutama penyakit di lambung.В Minum segelas air putihRasa ngantuk biasanya timbul karena anda kekurangan cairan tubuh. Cara mengatasi ngantuk pada kondisi ini tak lain dengan mencukupi kebutuhan caitan tubuh anda. Tiap harinya tubuh membutuhkan delapan gelas air putih agar tampak lebih segar, dan jika kekurangan, tubuh akan lebih cepat lesuh dan rasa ngantuk pun akan sering muncul.В Cuci mukaCuci muka juga merupakan cara menghilangkan rasa ngantuk yang efektif. Agar lebih efektif lagi, cobalah untuk mencuci muka anda dengan air yang dingin.Cara Mengatasi Sakit Hati Secepatnya Karena CintaDemikianlah bebarapa penjabaran mengenai cara mengatasi ngantuk di atas yang bisa langsung anda praktekkan saat mengalami rasa kantuk yang tak tertahankan. Cara Mengatasi dan Menghilangkan Rasa Ngantuk

Добавить комментарий


(обязательно)