CODEWITHSUNDEEP
htmlcss
suhail c
suhail c

Reputation: 1199

Black background for text

I am getting a black background for a text inside a div. I don't know why. the code and style for the div is.

<div class="intro_div">
            <div>Intro text goes here</div>
</div>

the style for the div is

.intro_div{
  color: #fff;
  font-size: xx-large;
  text-align: center;
  height: 500px;
  vertical-align: middle;
  line-height: 500px;
}

The output is enter image description here

Upvotes: 0

Views: 1023

Answers (5)

RK12
RK12

Reputation: 472

You should take white background color and black as color like this : 

<html>
<head>
    <style type="text/css">

    .intro_div{
      background-color: #fff;
      color:black;
      font-size: xx-large;
      text-align: center;
      height: 500px;
      vertical-align: middle;
      line-height: 500px;
}
    </style>
</head>
<body>
<div class="intro_div">
            <div>Intro text goes here</div>
</div>
</body>
</html>

Upvotes: 0

Hassan Naqvi
Hassan Naqvi

Reputation: 423

There is nothing in this code for black bg. It must be coming from elsewhere i.e parent element. Select div with intro class and check all styles on right hand side to the bottom, looking for background-color property in any style.

Upvotes: 0

Fergus
Fergus

Reputation: 2982

I noticed that you had the wrong CSS background-color property. It should be 

background-color:

not color:

https://jsfiddle.net/fergnab/16bobgmu/1/

Upvotes: 0

dsapalo
dsapalo

Reputation: 1847

Can you check using Google chrome or Mozilla Firefox debugger tools to see if the div inherits other css rules?

It may not have css rules for intro_div but instead have rules for the div class.

On Mozilla, you can right click on the text, view element, and analyze the css rules on lower right of the debugger window.

Since you're using chrome, go through all the rules in the Styles tab on the right of your window. It may be the case that one of your other style sheets is causing this (e.g. The material design style sheet). Better identify what is setting it to black first before explicitly setting it to white. It should be unset by default.

Upvotes: 0

Koby Douek
Koby Douek

Reputation: 16675

you need to use background-color, not color:

.intro_div{
  background-color: #fff;
  color:black;
  font-size: xx-large;
  text-align: center;
  height: 500px;
  vertical-align: middle;
  line-height: 500px;
}

Also, try using known names in your CSS, so it will be more readble. So instead of 

background-color: #fff;

Try using

background-color: white;

Upvotes: 1

Related Questions