CODEWITHSUNDEEP
htmlcss
user1896446
user1896446

Reputation:

text not appearing after div

I am trying to make text appear after the div element containing the background image but no text is appearing underneath it. I'm not sure what to add, the paragraph isn't there and I've tried multiple styes for "this is a test".

<div id="opener">
<p id="introText">
Adam Ginther is a<class id="blueText"> front-end developer</class> with an interest in responsive & mobile design
</p>
</div>
<br>
<div id="bottomOpener">
<p id="awesome">
I'm also 100% awesome
</p>
</div>
<p> This is a test</p>


/*  first.css */
body {
    background-color: black;
    font-family: 'Fenix', serif;
}
#opener {
    background-image: url('../images/background.jpg');
    background-color: #373737;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    height: 800px;
    width: 100%;
    position: fixed;
    text-align: center;
}
#introText {
    width: 400px;
    height: 40px;
    margin-left: 200px;
    left: 20%;
    color: #ececec;
    background-color: black;
    text-align: center;
    position: absolute;
    padding: 50px 80px 50px 80px;
    font-size: 1.2em;
    /* black, 50% opacity */
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
}
#blueText {
    color:#00aeff;
}
#awesome {
    color: white;
}
#bottomOpener {
    background-color: white;
}
p {
    color: green;
}

Upvotes: 0

Views: 2585

Answers (3)

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10643

Your text is behind your intro, as said in other answers. Here's a fiddle that fixes it http://jsfiddle.net/ASd33/ by adding z-index: -1 to your #opener .

Note that this is not a good solution, but it is good enough for you to debug.

Upvotes: 0

Whistletoe
Whistletoe

Reputation: 573

When you use position: fixed on the #opener element it is extracted from the normal flow of the document and displayed on top of the rest of the content. The p-element you want to see is thus hidden beneath.

Upvotes: 0

dezman
dezman

Reputation: 19358

Most likely, your text is hidden underneath your position: fixed; image. You could make it position: static; instead, or adjust the location of your paragraphs. If you had a jsFiddle, we could test your situation further.

Upvotes: 3

Related Questions