Menu
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.
704
The section background color you can set is based upon the main color of the theme you applied. To set the background of a section open its properties: In the properties you can define which type of section background you want to set: You need to add a supportsThemeVariants property to the manifest of your webpart and set its value to true:
Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background. The section background color you can set is based upon the main color of the theme you applied.
Alternately, you can use a background color instead of a background image. To use a background color, replace the <div> element code snippet you just created with the following highlighted <div> element code snippet like this:
To use a background color, replace the <div> element code snippet you just created with the following highlighted <div> element code snippet like this: . . . <body> <!--First section--> <div style="background-color: #f4bc01; height:480px; padding-top:80px;"> </div> </body> ... Save the file and reload it in the browser to check your results.
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><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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
