How to Make a Banner Image? - html

Question

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:
Since I am a beginner in CSS, how would I make a simple version of this?

Answer 1

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>Download
</div>
I hope this helps.

Answer 2

#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>