How to Make a Banner Image?

I have started developing my first website. I have run into an issue though - I can't figure out how to make a "Banner Image"!

Here is an example of what I'm trying to achieve: enter image description here Since I am a beginner in CSS, how would I make a simple version of this?

Solution

There are two ways using which you can create a banner image, the easy way and the not-so-difficult way.

The Easy Way:

Create a banner image using an image editing software like Photoshop and then use that image as a background-image on a <div>. Like this:

#bannerimage {
  width: 100%;
  background-image: url(http://s30.postimg.org/x0ne0p5wx/bootsrap.png);
  height: 405px;
  background-color: purple;
  background-position: center;
}

<div id="bannerimage"></div>

The Not-So-Difficult Way:

You will need to convert the banner design into HTML and style it using CSS. For example, let's take into account that purple bootstrap banner. It has a large purple background and all the text is added on it and then styled using CSS. You can do that like this:

#header {
    background: #664c8f;
    height: auto;
    padding: 100px 100px
}
h1 {
    color: white;
    font-family: Arial;
    text-align: center;
}
a#download {
    display: block;
    text-align: center;
    width: 150px;
    margin: 0px auto;
    padding: 20px;
    color: white;
    text-transform: uppercase;
    font-family: Arial;
    border: 1px solid #fff;
    text-decoration: none;
    border-radius: 10px;
}

<div id="header">
    <h1>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</h1><a href="#" id="download">Download</a>
</div>

I hope this helps.