Размещение изображения перед фоном

Question

У меня есть раздел, который можно просматривать на синем фоне. Я пытаюсь поставить изображение в верхнем левом углу, но он едва заметен, и синий фон исчезает.

часть HTML:

<header id="main"> 
    <a href="#" id="stackoverflow" class="icons"></a> 
</header> 
<section id="stack" class="news"></section> 

JQuery:

$('#stackoverflow').click(function(){ 
    $('#stack').toggle('slow', $st); 
    $('#stack').css({'background': 'url(stack.jpeg) no-repeat', 'position':'absolute', 'z-index':'1'}); 
}); 

CSS:

#stack{ 
float: left; 
} 

.news{ 
position: absolute; 
z-index: -1; 
width: 600px; 
background-color: #0000FF; 
padding: 10px; 
border-radius: 10px; 
box-shadow: 3px 2px 3px #000; 
} 

.news a{ 
position: absolute; 
text-decoration: none; 
color: #fff; 
} 

.news a:hover{ 
color: #dc692e; 
} 

.news td{ 
padding: 5px 10px; 
border-bottom: 2px #fff solid; 
} 

Вот что он выглядит как без меня пытается ти поместить изображение в углу:

Вот фотография, когда я пытаюсь добавить изображение в угол:

Спасибо!

Answer 1

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

$('#stackoverflow').click(function(){ 
    $('#stack').toggle('slow', $st); 
    $('#stack').css({'background': 'url(stack.jpeg) no-repeat BLUE', 'position':'absolute', 'z-index':'1'}); 
}); 

Кроме того, чтобы добавить, так как ваше размещение изображения в качестве фона здесь я хотел бы предложить добавить некоторое дополнение к верхней части указанного элемента, чтобы сделать это, что текст не закладывает ваш образ.

Лучшим решением для этого было бы фактически ввести указанное изображение в конкретный элемент. IE:

$('#stack').prepend('<img id="theImg" src="theImg.jpg" />')