Css'de background üzerine bir bg daha koyma

31-03-2014, 12:10:39

merhaba ben background'umun üzerine yani sitenin en üstüne bir çubuk çekmek istiyorum. CSS multiple bg diye arattım ama yapamıyorum.
Denediğim kod bu:

body {
background: url("../images/bg.png"),url("../images/headerbg.png")top left repeat;
}

Ama sonuçta sadece bg.png'yi görüyor.
Yapmak istediğim:

(Kırmızı çizdiğim yere gümüş rengi 50 px uzunluğunda bir header.bg koymayı düşünüyorum.)
Yardımlarınız için teşekkürler.

31-03-2014, 12:28:31

#2

Haktan

Bunu z-index ile ypabilrisin örnek iki imaj için denedim bunu:

http://jsfiddle.net/VjNG4/

Ancak bunu border ile de çözebilirsin.

http://jsfiddle.net/2yAQy/

oda burda

31-03-2014, 12:34:55

#3

truser

bu bg

body {
background: url("../images/bg.png");
}

şimdi 1 tane cizgi adında div oluştur onada şu değerleri ver

.cizgi{background:url("../images/headerbg.png"); width="auto"; height:"2px"}

Hatam varsa kusura bakmayın.

31-03-2014, 15:04:04

#4

RainManTR

truser adlı üyeden alıntı: mesajı görüntüle

bu bg

body {
background: url("../images/bg.png");
}

şimdi 1 tane cizgi adında div oluştur onada şu değerleri ver

.cizgi{background:url("../images/headerbg.png"); width="auto"; height:"2px"}

Hatam varsa kusura bakmayın.

.cizgi ortada yok

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 15:04:04 -->-> Daha önceki mesaj 15:01:41 --

Haktan adlı üyeden alıntı: mesajı görüntüle

Bunu z-index ile ypabilrisin örnek iki imaj için denedim bunu:

http://jsfiddle.net/VjNG4/

Ancak bunu border ile de çözebilirsin.

http://jsfiddle.net/2yAQy/

oda burda

border ile olmaz heralde çünkü resim sonuçta =?
birinci önerinizi denedim verdiğiniz resim oluyor.
ben kendi resmimle değiştirip

.cizgi{
background-image:url(../images/headerbg.png);
position:absolute;
z-index:2;
width:auto;
height:250px;
position:fixed;
top:0;
left:0;
}

değerleri değiştirdiğimde gene uçuyor?

31-03-2014, 15:21:08

#5

Haktan

RainManTR adlı üyeden alıntı: mesajı görüntüle

.cizgi ortada yok

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 15:04:04 -->-> Daha önceki mesaj 15:01:41 --

border ile olmaz heralde çünkü resim sonuçta =?
birinci önerinizi denedim verdiğiniz resim oluyor.
ben kendi resmimle değiştirip
.cizgi{ background-image:url(../images/headerbg.png); position:absolute; z-index:2; width:auto; height:250px; position:fixed; top:0; left:0; }
değerleri değiştirdiğimde gene uçuyor?

görebileceğim bi yer var mı hocam?

31-03-2014, 15:27:38

#6

RainManTR

Haktan adlı üyeden alıntı: mesajı görüntüle

görebileceğim bi yer var mı hocam?

http://zfryayincilik.com/deneme/

31-03-2014, 15:30:42

#7

Haktan

RainManTR adlı üyeden alıntı: mesajı görüntüle

http://zfryayincilik.com/deneme/

  
body
{ background: url("../images/bg.png") repeat scroll 0 0%, url("../images/headerbg.png") repeat scroll left top rgba(0, 0, 0, 0);    margin: 0;
    padding: 0;
    position: relative;
    z-index: -1;
}

.cizgi 
{
    background-image: url("../images/headerbg.png");
    float: left;
    height: 25px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 16;


}

width değerine illaki bi değer vermen gerekiyor. auto kullanıcaksan min-width:500px; gibi bir değer kesinkez bildirmen gerekiyor yoksa göremezsin hocam

31-03-2014, 15:36:17

#8

RainManTR

Haktan adlı üyeden alıntı: mesajı görüntüle

  
body
{ background: url("../images/bg.png") repeat scroll 0 0%, url("../images/headerbg.png") repeat scroll left top rgba(0, 0, 0, 0);    margin: 0;
    padding: 0;
    position: relative;
    z-index: -1;
}

.cizgi 
{
    background-image: url("../images/headerbg.png");
    float: left;
    height: 25px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 16;


}

width değerine illaki bi değer vermen gerekiyor. auto kullanıcaksan min-width:500px; gibi bir değer kesinkez bildirmen gerekiyor yoksa göremezsin hocam

hah oldu çok sağolun hocam.

31-03-2014, 15:38:46

#9

Haktan

RainManTR adlı üyeden alıntı: mesajı görüntüle

hah oldu çok sağolun hocam.

Rica ederim hocam sıkıntı yaşarsan yine sor elimden geldiğinde yardımcı olurum