#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    1
    Rep Power
    0

    Smile How to make a two color background


    Hi everyone!

    I am new to HTML and CSS, just started a few days ago. I have been through many tutorials and know the basics. To practice I am trying to recreate the layout of (www. instagram .com), from scratch.

    If you go to Instagram, you will see that they have a two-colored background. I only know how to make the background one color, and have no idea on where to even start in order to make it two colors. Any suggestions?

    I tried reading the Instagram page source code, but for some reason I can't understand it. I don't know any Javascripts, so that might be the reason.

    Also, another question, when I set a background color to blue, there appears to be a thin white line between the background color and the browser outlines. I think the browser is applying some margin distance by default, any idea on how to remove this?

    Thank you so much for your time
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    Any element can have a background (or even multiple backgrounds, depending on the browser). There are lots of ways you could have multiple backgrounds, but Instagram is using two elements.

    One background is on the <body>, and another is on the div with an id of "home-bg". The way they layer it is to position home-bg absolutely, and then they layer the rest of the page on top of it with position: relative (I'm oversimplifying, but position relative and absolute can be used to position things on top of each other).

    Here's a quick and dirty version:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    body {
    	background: #ccc;
    	margin: 0
    }
    .topBg {
    	background: blue;
    	position: absolute;
    	height: 200px;
    	width: 100%
    }
    .page {
    	max-width: 960px;
    	margin: 0 auto;
    	position: relative;
    	border: 1px solid black
    }
    </style>
    </head>
    
    <body>
    <div class="topBg"></div>
    <div class="page"> other stuff here. </div>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo