How to add background-color in a section part?

Asked 17/8, 2016 at 9:32 Answered 29/5, 2020 at 16:47

Is there any other way to add background color in section tag? Except using body {background-color: blue;}, what is are other ways to add background color into section?

I am trying to add the section background color like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <style>
            #ABC {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <section id="ABC">
        </section>
    </body>
</html>

There is no color showing on my browser.

Silurid answered 17/8, 2016 at 9:32 Comment(2)

Not showing because #ABC does not contains any content. – Sliding 17/8, 2016 at 9:34

It's because there is no content in your section. Try adding height: 100px then you can see the background color. – Newbold 17/8, 2016 at 9:34

Its because #ABC does not have any content or does not have a height!

See below what happened when I have set a height to it.

<!DOCTYPE html>
<html>
  <head>
    <title>Testing</title>

    <style>

    #ABC {
      background-color: blue;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    body{
      background: grey;
      margin: 0;
    } 

    </style>

  </head>

  <body>

<section id="ABC">


</section>

  </body>
</html>

Adrianneadriano answered 17/8, 2016 at 9:34 Comment(4)

If you want to add background-color to the whole background, add it to the "body"-tag. If not, this answer is correct. – Halstead 17/8, 2016 at 9:39

@Silurid see how I applied a color to the whole page – Adrianneadriano 17/8, 2016 at 9:39

Which mean there is no way to add background color to the whole background on the section part? Except using body {background-color: blue;}? – Silurid 17/8, 2016 at 9:49

possible... I stretched out section to fill the body and see the result. – Adrianneadriano 17/8, 2016 at 10:4

<section> element is an grouping container. In your example there is no content and hence it's not visible (I have added red color border to highlight the <section>).

Highlighting the <section>:

<!DOCTYPE html>
<html>

<head>
  <title>Testing</title>
  <style>
    #ABC {
      background-color: blue;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <section id="ABC">

  </section>
</body>

</html>

Try adding height or content to your <section> for the background-color to be visible.

<!DOCTYPE html>
<html>

<head>
  <title>Testing</title>
  <style>
    #ABC {
      background-color: blue;
    }
  </style>
</head>

<body>
  <section id="ABC">
    Some text here
  </section>
</body>

</html>

Newbold answered 17/8, 2016 at 9:40 Comment(0)

Or maybe they should try a little more color using gradient.

<!DOCTYPE html>
<html>

<head>
  <title>Testing</title>
  <style>
    #ABC {
      background-image: linear-gradient(45deg,rgb(218,34,255) 30%,#9733ee 90%);
padding: 1em;
    border-radius: 3px;
    margin: 1em 0;
color: #fff;
    }
  </style>
</head>

<body>
  <section id="ABC">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </section>
</body>

</html>

Pollen answered 29/5, 2020 at 16:47 Comment(0)

Recommended topics

Hot tags