如何制作横幅图片？

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><a href="#" id="download">Download</a> </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>