July 17th, 2013, 12:22 PM
How to make a two color background
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?
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
July 17th, 2013, 12:42 PM
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:
margin: 0 auto;
border: 1px solid black
<div class="page"> other stuff here. </div>