Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Вставить изображение в шапку (css) (https://javascript.ru/forum/xhtml-html-css/39948-vstavit-izobrazhenie-v-shapku-css.html)

ankerk 18.07.2013 09:31

Вставить изображение в шапку (css)
 
Вложений: 1
Доброе утро, ув. пользователи! Подскажите пожалуйста, как правильно установить картинку справа в шапку, вот что получается, и вот код который используется для левого изображения, и для растяжения изображения:
#headline
{
background-image: url(images/left.png), url(images/center.png);
background-repeat: no-repeat, repeat-x;

height:239px;
}

ОлегА 18.07.2013 10:20

для картинки пропишите стиль
position:absolute;
top:0;
right:0;

ruslan_mart 18.07.2013 15:37

Лучше таблицой сделать или div'ами с display:inline-block.

ankerk 18.07.2013 16:28

В общем вот ребята,для картинки стиль:
<style type="text/css">
#right{ 
position: absolute;
top: 0;
right: 0;
height:239px;
}
</style>

и, засунул саму картинку в div:
<div id="right">
    <img src="images/right.png" alt="картинка" />
   </div>

И все очень даже неплохо встало, спасибо). И скажите, еще есть какие варианты для вставки?

ankerk 18.07.2013 16:43

И еще, нельзя этим кодом:
#right{
background-image: url(images/right.png);
position: absolute;
top:0;
right:0;
height:239px;
}

вставить картинку в style.css, если нельзя, то почему?:)

skrudjmakdak 18.07.2013 17:17

<style type="text/css">
.header
{
width: 900px;
height: 300px;
margin: 0 auto;
background-image: url(/img1.png);
}

.img
{
width: 300px;
height: 300px;
background-image: url(/img2.png);
float: right;
}
</style>
<div class="header">
    <div class="img"></div>
</div>

ruslan_mart 21.07.2013 09:36

Вариант CSS3:
<div class="header"></div>
.header {
   background-image: url('img1.png'), url('img2.png');
   height: 300px;
   width: 900px;
}


Часовой пояс GMT +3, время: 03:57.