CODEWITHSUNDEEP
htmlcss
user6182812
user6182812

Reputation:

background-color not working with <body>

I want to have the background color fill the entire page. So far, I have an image that is the background, but sometimes doesn't load.

So I would like to set it with css.

This is my body section:

body {
background-color: gray;
margin: 0;
}

This is my entire html files that is not working.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://sammyandsam.x10.bz/css/font-awesome.css">
<meta name="robots" content="noindex">
<script src="http://sammyandsam.x10.bz/js/snow.js"></script>
<meta name="description" content="Sammyandsam's page">
<link rel="stylesheet" type="text/css" href="http://sammyandsam.x10.bz/css/bootstrap.css">
<link rel="shortcut icon" href="http://sammyandsam.x10.bz/favicon.png"/>
<title>[ Sammyandsam ]</title>
</head>
<body>
<div class="header">
<h1>[ Sammyandsam ]</h1>
<div class="icons">
<i class="fa fa-twitter"></i> <a href="https://twitter.com/sammyandsam_"> Twitter |</a>
<i class="fa fa-steam"></i> <a href="https://steamcommunity.com/id/sammyandsam"> Steam |</a>
<i class="fa fa-github"></i> <a href="https://github.com/sammyandsam"> Github |</a>
<i class="fa fa-tumblr"></i> <a href="https://sammyandsam.tumblr.com"> Tumblr</a>
</div>
</div>
<div class="content">
<h2>About <a class="btn btn-info" role="button" href="/about/"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></h2>
<h2>Projects <a class="btn btn-info" role="button" href="/projects/"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></h2>
<h2>Repo <a class="btn btn-info" role="button" href="/repo/"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></h2>
</div>
</body>
</html>

It will not set the background. It stays white for some reason.

I have tried setting each div a background color, but it will not fit the entire page.

Any idea what to do?

How to fix: DO NOT PUT CUSTOM CSS INTO BOOTSTRAP. Make a seperate .css file with your css in there.

Upvotes: 2

Views: 14028

Answers (4)

Shoaib Arif
Shoaib Arif

Reputation: 807

Well in that scenario try to put inline style if that doesn't work for you then make sure that your body has width and height attributes.

Upvotes: 0

imperious27
imperious27

Reputation: 11

I had the similar issue the solution was to link the CSS file after the bootstrap CDN link. So that our custom styling is prioritized.

Upvotes: 0

Computer Lover
Computer Lover

Reputation: 61

You just didn't linked any CSS file with your HTML Document. So first link it with your document or you can use inline css like 

<body style="background-color: gray" >

If this not working then you can try like this.

<body style="background-color: gray !important" >

Hopes your problem will solve.

Upvotes: 1

jamebob
jamebob

Reputation: 322

Two possibilities I can think of are:

1) Your style is being overridden by another style. You could try background-color: gray !important; and see if that works.

2) Your body doesn't actually have any height (i.e. if there are floated items that haven't been cleared) Inspect it in Chrome or Firefox and make sure the body takes up the full height of the page.

Upvotes: 4

Related Questions