2 Images übereinander

hi,

benutze twentytwelve und habe ein problem, das hier ist der aktuelle css code und es geht mir darum, dass ich oben links und rechts die orangenen ecken wegbekomme:

'before_widget' => '<div class="block1 block2">',

.block1
{
    
    width:183px;
    background: url("img/title_bg.png"),url("img/block_bg.png");
    background-repeat: no-repeat,repeat-y;


}

das kommt dabei raus:

http://www7.pic-upload.de/23.02.14/x2v2ay3wg967.png

hatte vor, die beiden images in 2 divs zu packen, damit ich diese einzelnd verschieben kann, um oben die ecken wegzubekommen..wichtig: block_bg.png muss repeat-y haben.

bin nicht der css-profi habe aber schon alles mögliche probiert..z-index, overflow z.b. aber immer verdeckt eins der beiden imgs das andere.

.block1
{
    
    width:183px;
    background: url("img/title_bg.png");
    background-repeat: no-repeat;


}
.block2
{
    
    width:183px;
    background: url("img/block_bg.png");
    background-repeat: repeat-y;


}

per google finde ich immer nur was mit position:absolute aber das klappt bei mir garnicht
jemand ne möglichkeit, wie ich title_bg im vordrgrund angezeigt bekomme?

heute nochmal ne stunde probiert..kein erfolg..wenn block_bg kein repeat-y hat klappt es, dass die ecken oben weg sind aber es muss repeat-y haben...

sind doch alle informationen da die man braucht oder? hier nochmal der link zum screenshot vom problem: http://www7.pic-upload.de/23.02.14/x2v2ay3wg967.png

das einzige problem ist halt, dass ich nicht title_bg[grauer hintergrund] über block_bg[orangener hintergrund] gelegt bekomme da er immer nur block_bg über title_bg legt..