White box behind text

Question

So I'm creating a website and I've got my background set. I also have a title on the index page but for some reason there is a white box around the text. I don't know why it does that but it has to have the color of the background.

HTML

<!doctype html>
<html>
<head>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

  <title></title>
</head>
<body>
<p class="texts">Under Construction</p>
    </body>
</html>

CSS

@font-face {
    font-family: 'Font';
    src: url(BebasNeue_Light.otf);
}

.texts{
    font-family: 'Font';
    text-align: center;
    font-size: 1000%;
}

html { 
background-color: #1abc9c;
}

Here is a jsfiddle demo

Please provide a link to the output. Use [JSFiddle](http://jsfiddle.net) — m4n0, Jun 07 '15 at 11:21

score 3 · Accepted Answer · edited May 23 '17 at 12:14

It is two things you need to change.

The first is the order of the CSS files in the <head>. You need yours last so that your styles override Bootstrap's styles.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">

The second is to change the html {...} CSS rule and use body instead. While you can set styles for the <html> tag, it is better to use the <body> tag instead (see here a relevant discussion in SO).

body { background-color: #1abc9c; }

score 1 · Answer 2 · edited Jun 07 '15 at 13:14

1

Here is the fiddle link - https://jsfiddle.net/pravin7007/3szxo5su/

html, body {
    background-color: #1abc9c !important;
}

1.) in your html, JQuery should be loaded before bootstrap.js
2.) bootstrap body css is overwritting your body background

edited Jun 07 '15 at 13:14

fsacer

1,382
1
15
23

answered Jun 07 '15 at 12:33

pravin

166
1
4

1

i definitely wouldn't advise the use of important unless absolutely necessary (for example, if you have to override a property set directly in an element style attribute by an external library) - css selector specificity issues are a nightmare and specificity should be kept to a minimum - the OPs problem can be solved by re-ordering definitions rather than forcing one definition to take priority - it's a bad habit – Toni Leigh Jun 07 '15 at 13:41

score 0 · Answer 3 · answered Jun 07 '15 at 11:58

Your body tag has background-color: #fff; on it. The body tag is overlaying the html tag which has the desired background colour on it. It looks like the body tag is inheriting the white background from the included bootstrap files and you are then not overriding that in your own styles.

CSS files are processed in order, with any style applied to a selector last in the set of files being added to that element last. So given you load your css file first anything you define here will be overridden by bootstrap if bootstrap defines the property on the same selector.

It's best to load css files based on specificity. As bootstrap is a shared library and your style file is specific to your site, then you should load your css file later that the bootstrap one. This way you can guarantee that what you want to happen will be what the browser does.

You can find out more about selector specificity and load order here. Be very careful with selector specificity, it's easy to get in a mess and you should only use it if absolutely necessary (this link is from an excellent css blog).

You also actually need to apply your new colour to the body tag in your css, which you aren't currently doing. Applying it to the html will make the desired colour appear behind the body colour as the html tag is further up the DOM tree structure.

The reason this appears like it's the element with .texts class, your title, that is misbehaving is because the body tag has automatically shrunk to fit it's content (see this fiddle for simplicity). By adding some extra <br /> tags to extend things down, as I have done here you can see the white area expand to accommodate them. Also, as you can see here, by applying a new colour to the .texts class you can see that it's colour can be changed as it is further down the DOM tree than the body tag.

White box behind text

3 Answers3