CSS: Full Browser’s Width Bar

Source: http://css-tricks.com/full-browser-width-bars/

Below are pretty much the main CSS code. For more details, please refer to the source.
To change original color. You can just update the background.

h2 {
  position: relative;
  background: black; 
h2:before, h2:after {
  content: "";
  position: absolute;
  background: black;  /* Match the background */
  top: 0;
  bottom: 0;
  width: 9999px;   /* some huge width */
h2:before {
  right: 100%; 
h2:after {
  left: 100%;

html, body {
    overflow-x: hidden;
CSS: Full Browser’s Width Bar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s