CODEWITHSUNDEEP
htmlcssbackground-color
Igor
Igor

Reputation: 558

Creating a full-width background color using CSS

I'm creating a website called WebSpace, and I would like the header background color to stretch from end to end. Currently, it looks like this:

enter image description here

I would like to get rid of the extra whitespace on the top, left, and right, with a clean solution if possible.

Here is the HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/style.css"/>
    <link rel="stylesheet" href="/assets/layout.css"/>
    <title>WebSpace</title>
  </head>
  <body>
    <div class="row title">
      <span class="title">WebSpace</span>
    </div>
  </body>
</html>

The style.css file:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,100&subset=cyrillic,cyrillic-ext,latin-ext,latin);
body { 
    font-family: 'Roboto', sans-serif;
}
span.title {
    font-weight: 100;
    font-size: 66px;
    width: 100%;
    float: left;
}

And my layout.css file:

body { overflow-x:hidden; !important}
html { width: 100%; }
div.row { width: 100%; }
div.span10 { width: 100%; }
div.span9 { width: 90%; }
div.span8 { width: 80%; }
div.span7 { width: 70%; }
div.span6 { width: 60%; }
div.span5 { width: 50%; }
div.span4 { width: 40%; }
div.span3 { width: 30%; }
div.span2 { width: 20%; }
div.span1 { width: 10%; }

/*Row Styles*/
div.title {
    background-color: #F7D023;
    height: 100px;
    color: white;
    position: absolute:
    left: 0;
    right: 0;
    overflow-x:hidden;  !important
}

Upvotes: 0

Views: 8871

Answers (1)

Vucko
Vucko

Reputation: 20834

Browsers are using different default stylesheets. Put:

html, body {
    padding: 0;
    margin: 0;
}

JSFiddle

Or better, use a CSS reset.

Upvotes: 5

Related Questions