Форум сайтостроителей

Форум сайтостроителей > Веб-мастеру > Веб-программирование > Помогите по css как наложить одну картинку на другую с помощью css
Полная версия: Помогите по css как наложить одну картинку на другую с помощью css
Вы просматриваете yпpощеннyю веpсию форума. Пеpейти к полной веpсии.

maximus035

05-06-2010, 16:51
мне надо 1 картинку по горизонтали в повторении и на неё 2 без повторения!
когда накладываешь 2 то фон заполняется 2картинкой помогите!!
Код:
<html>
<head>
<title>Красноярский web портал</title>
<style>
Body
{
background-color: #f7ab5f;
background-image: url('file:///C:/Users/%D0%9C%D0%B0%D0%BA%D1%81%D0%B8%D0%BC/Desktop/1.png');
background-repeat:repeat-x
height: 170px; background-image: url('file:///C:/Users/%D0%9C%D0%B0%D0%BA%D1%81%D0%B8%D0%BC/Desktop/site/%D0%B9.png');
background-repeat:no-repeat
position: relative
}

</style>

Или по другому сказать как наложить одну картинку на другую с помощью css

Master

05-06-2010, 22:16
maximus035

Код:
<html>
<head>
<title>Красноярский web портал</title>
</head>
<style>
#background
{
    position: absolute;
    background-image: url('file:///C:/Users/%D0%9C%D0%B0%D0%BA%D1%81%D0%B8%D0%BC/Desktop/1.png');
    background-repeat: repeat-x;
    width:100%;
    height: 500px;
    left: 0;
    top: 0;
}
.logo
{
    position: absolute;
    background-image: url('file:///C:/Users/%D0%9C%D0%B0%D0%BA%D1%81%D0%B8%D0%BC/Desktop/site/%D0%B9.png');
    background-repeat: no-repeat;
    background-position: center center;
    width: 301px;
    height: 168px;
    left: 362px;
    top: 15px;
}
</style>
<body>
<div id="background"></div>
<div class="logo"></div>
</body>
</html>

maximus035

06-06-2010, 07:56
Master спасибо брат всё получилось отменно! Я ещё одно спрошу а как ещё одну картинку добавить ну на ты которая повторяется 1 слева и 2справа, 1 слева работает, а когда добавляешь 2 левая исчезает, а правая появляется как сделать чтоб и левая и правая вместе работали?

Master

06-06-2010, 08:43
maximus035, сколько хочешь можно картинок добавить, главное понять принцип.

Код:
<html>
<head>
<title>Красноярский web портал</title>
</head>
<style>
#background
{
    position: absolute;
    background-image: url('file:///C:/Users/%D0%9C%D0%B0%D0%BA%D1%81%D0%B8%D0%BC/Desktop/1.png');
    background-repeat: repeat-x;
    width:100%;
    height: 500px;
    left: 0;
    top: 0;
}
.logo1
{
    position: absolute;
    background-image: url('file:///C:/Users/%D0%9C%D0%B0%D0%BA%D1%81%D0%B8%D0%BC/Desktop/site/%D0%B9.png');
    background-repeat: no-repeat;
    background-position: center center;
    width: 301px;
    height: 168px;
    left: 71px;
    top: 15px;
}
.logo2
{
    position: absolute;
    background-image: url('file:///C:/Users/%D0%9C%D0%B0%D0%BA%D1%81%D0%B8%D0%BC/Desktop/site/%D0%B9.png');
    background-repeat: no-repeat;
    background-position: center center;
    width: 301px;
    height: 168px;
    left: 628px;
    top: 15px;
}
</style>
<body>
<div id="background"></div>
<div class="logo1"></div>
<div class="logo2"></div>
</body>
</html>

maximus035

06-06-2010, 09:02
Спасибо!
Форум сайтостроителей > Веб-мастеру > Веб-программирование > Помогите по css как наложить одну картинку на другую с помощью css
URL ссылки