CODEWITHSUNDEEP
htmlcss
AlexBrand
AlexBrand

Reputation: 12401

HTML & CSS background

I am fairly new to CSS and I wanted to know how can achieve this:

I am writing a page that will display a form in the middle (Represented by the black box). I want it to have white background that will overlap the body background (represented by the red lines).

Check out this site for the example image. (Sorry I couldn't post it inline)

http://www.freeimagehosting.net/uploads/bf2d71f238.png

Thank you very much!

Upvotes: 5

Views: 163

Answers (2)

Nick Craver
Nick Craver

Reputation: 630349

You can give your elements a few styles, background can be color, images, etc.

CSS:

body { /* Red Lines Here */
  background: #990000;
}
#outer { /* White box Here */
  background: #ffffff; /* White */
  width: 900px; /* Total width will be 1000px once you include padding */
  padding: 50px; /* White border around black box, this is padding on all sides */
  margin: 0 auto; /* Centering it */
}
#inner { /*Black Box Here */
  background: #000000; /* Black */     
  color: #ffffff; /* White Text so you can see it */ 
}

Html:

<html>
  <head>
    <title>My Page! Step off!</title>
  </head>
  <body>
    <div id="outer">
      <div id="inner">
        Content!
      </div>
    </div>
  </body>
</html>

Upvotes: 3

Frank Schwieterman
Frank Schwieterman

Reputation: 24480

Go read a book like 'CSS Mastery'. Once you know some basics and can explain what you tried and have a basis for asking a question in the first place, then ask for help.

Upvotes: 0

Related Questions