CODEWITHSUNDEEP
htmlcss
user14599750
user14599750

Reputation:

how do make the bg color of text in css span the whole screen in width

I am starting out with html and css and want to know how to give a line of text a background-color. For example :

#python-heading {
    font-family: 'Arvo', serif;
    position: absolute;
    bottom: 600px;
    left: 600px;
    background-color: #DEE0D9;
}
<body>
        <header>
            <span><h1 id="python-heading">Python</h1></span>
            <h2 id="python-subheading">Subtitle</h2>
        </header>
</body>

but my text not the whole area behind the text. i mean that i want it like this:

hyphen => bg color

-------------------------------------------text--------------------------------------------------------

but it is like this:

                                      -text-

what do i need to change/add?

Upvotes: 0

Views: 51

Answers (2)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

I think you should avoid using h1 inside span and simply go with h1 and following code change. ( If I have understood your question correctly then this may help)

#python-heading {
    background-color: #DEE0D9;
    text-align:center;
}
<header>
 <h1 id="python-heading">Python</h1>
 <h2 id="python-subheading">Subtitle</h2>
</header>

Upvotes: 1

ATP
ATP

Reputation: 3249

Add width:100%; and change left:600px; to padding-left:600px;

#python-heading {
    font-family: 'Arvo', serif;
    position: absolute;
    width:100%;
    bottom: 600px;
    left:0;
    padding-left: 600px;
    background-color: #DEE0D9;
}
<body>
        <header>
            <span><h1 id="python-heading">Python</h1></span>
            <h2 id="python-subheading">Subtitle</h2>
        </header>
</body>

Upvotes: 0

Related Questions