Problem with a title background not showing

Question

i am trying to have a yellow background of a title above an image. The text is fine but not the yellow color. It appears well if i put some margin on the image

Thanks all

https://codepen.io/pg2777/pen/oNNErMw

<article id="post-106" class="post-106 post type-post status-publish 
format-standard has-post-thumbnail hentry category-news">
               <img width="810" height="520" 
src="https://cdn.pixabay.com/photo/2019/07/21/07/12/new-york- 
4352072_960_720.jpg" class="attachment-post-thumbnail size-post-thumbnail 
wp-post-image" alt=""          <header class="entry-header 
article_news_header">
                    <h1 class="entry-title">This is a header and 
it&rsquo;s here to do the show </h1>
                </header>
                <div class="entry-content">
                    <p>And this is the subheader excerpt. And this is the 
subheader excerpt. And this is the subheader excerpt. And this is the 
subheader excerpt.</p>

                </div>
            </article>

 .article_news_header{
    background-color:#ffe400;
    margin-top:-50px;
    z-index:9;
    width:30%;

}
.category-news img{
    border:11px solid purple;
    z-index:3;
    margin-left:40px;
}


.entry-title {

    font-size: 28px;
    margin-top:-30px;
    background-color:yellow;
    margin-bottom:80px;
    width:20%;
    color:red;
    z-index:6;
    height:100px;
}

`z-index` works with positioning (`position:relative`) to the element, add that and it works. — Roy Bogado, Nov 05 '19 at 09:00
Use (position: relative) to .entry-title class. This will fix your issue. — Umapathi, Nov 05 '19 at 10:04

score 2 · Answer 1 · answered Nov 05 '19 at 09:10

2

Add position: absolute; on .entry-title

.entry-title {
    font-size: 28px;
    margin-top:-30px;
    background-color:yellow;
    margin-bottom:75px;
    width:20%;
    color:red;
    z-index:6;
    height:100px;
   position: absolute;
}

Hope can help you

answered Nov 05 '19 at 09:10

Shah

557
5
15

Glad to help you..! – Shah Nov 07 '19 at 01:26

score 0 · Answer 2 · answered Nov 05 '19 at 09:01

Read about z-index

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

z-index works with positioning (position:relative) to the element, add it and should work.

score 0 · Answer 3 · answered Nov 05 '19 at 09:08

0

add this style

.entry-title {
font-size: 28px;
background-color:yellow;
width:20%;
color:red;
z-index:6;
height:100px;
position:absolute;
top:0px;
left:300px;
text-align:center;
}

answered Nov 05 '19 at 09:08

shashi kumar

362
2
9

score 0 · Answer 4 · answered Nov 05 '19 at 09:16

0

Just add (at the end) the position to the entry-title as relative,

.entry-title{
    ....
    ....
    position: relative;
}

verified in your codepen also.

answered Nov 05 '19 at 09:16

Bhumik

102
8

score -1 · Answer 5 · answered Nov 05 '19 at 09:00

-1

Add position: relative; on .entry-title

.entry-title {
    font-size: 28px;
    margin-top: -30px;
    background-color: yellow;
    margin-bottom: 80px;
    width: 20%;
    color: red;
    z-index: 6;
    height: 100px;
    position: relative;
}

answered Nov 05 '19 at 09:00

Lalji Tadhani

14,041
3
23
40

Problem with a title background not showing

5 Answers5