CBSpicer Art

Banner with Image

In our first example, we'll construct a simple banner with an image:

Open Demo

A banner with an image is the simplest design that captures a visitor's attention with a visual element. And it is an excellent starting point for more complex banner designs.

Here we create a banner with a height that matches the height of the screen. We apply the image as a background so that it will cover the entire banner on screens of all sizes and aspect ratios.

Let's start with the HTML used to create our responsive banner with an image:

                  
<!-- Banner -->



<div class="banner"></div>

Here we create our banner area using the <div> element and assign it:

• The class="banner" attribute to control the layout and style of the banner area

Next the CSS:

                  
* {

  box-sizing: border-box;

  margin: 0;

  border: 0;

  padding: 0;

}



/* Banner */



.banner {

  height: 100vh;

  background: url('my-image.jpg') no-repeat center center / cover;

}

First, we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.

Next we create the .banner CSS rule to control the layout and style of our banner area. We include:

• The height: 100vh; property to specify that the banner area is the full height of the screen
• The background: url('my-image.jpg') no-repeat center center / cover; property to specify:
  • The location and name of the image file
  • That the image does not repeat
  • That the image is horizontally and vertically centered
  • That the image covers the entire banner area

And there you have it! A responsive banner with an image.

The demonstration provided expands upon this code to show the banner in a complete web page environment.

To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.

To customize the demonstration, first save a local copy of the document on your computer. Then, open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.

Banner with Parallax Scrolling

In our second example, we'll build upon our Banner with Image design to include parallax scrolling:

Open Demo

A banner with parallax scrolling adds a new dimension of visual interest by creating the illusion of depth in the page. The effect occurs when the text scrolls with the page while the image remains fixed. This creates the impression that the text occupies the foreground of the page while the image occupies the background.

The construction of the banner with parallax scrolling is similar to our Banner with Image design. But we add:

• CSS to specify that the image is fixed and does not scroll with the page

Let's start with the HTML used to create our responsive banner with parallax scrolling:

                  
<!-- Banner -->



<div class="banner"></div>

Here we create our banner area using the <div> element and assign it:

• The class="banner" attribute to control the layout and style of the banner area

Next the CSS:

                  
* {

  box-sizing: border-box;

  margin: 0;

  border: 0;

  padding: 0;

}



/* Banner */



.banner {

  height: 100vh;

  background: url('my-image.jpg') no-repeat center center / cover fixed;

}

First, we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.

Next we create the .banner CSS rule to control the layout and style of our banner area. We include:

• The height: 100vh; property to specify that the banner area is the full height of the screen
• The background: url('my-image.jpg') no-repeat center center / cover fixed; property to specify:
  • The location and name of the image file
  • That the image does not repeat
  • That the image is horizontally and vertically centered
  • That the image covers the entire banner area
  • That the image is fixed and does not scroll with the page

And there you have it! A responsive banner with parallax scrolling.

The demonstration provided expands upon this code to show the banner in a complete web page environment.

To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.

To customize the demonstration, first save a local copy of the document on your computer. Then, open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.

Banner with Text

In our third example, we'll build upon our Banner with Parallax Scrolling design to include a text overlay:

Open Demo

A banner with text communicates more information to visitors than an image alone. Here we add a heading and subheading to our banner layout. To engage visitors, we also include a call-to-action button below the text. The button can be designed to perform any number of actions. Here it scrolls visitors to the main content area when clicked.

The construction of the banner with text is similar to our Banner with Parallax Scrolling design. But we add:

• HTML and CSS to create the heading, subheading, and button
• JavaScript to allow smooth scrolling

Let's start with the HTML used to create our responsive banner with text:

                  
<!-- Banner -->



<div class="banner">



  <div class="page banner_container">



    <div class="banner_section">



      <h2 class="banner_heading">

        My Page</h2>



      <p class="banner_subheading">

        My Message to Visitors</p>



    </div>



    <div class="banner_section">



      <p class="banner_button">

        <a href="#main"

        class="banner_button_link">

          Explore</a></p>



    </div>



  </div>



</div>

First, we create our banner area using the <div> element and assign it:

• The class="banner" attribute to control the style of the banner area

Inside the banner area we create our banner container using the <div> element and assign it:

• The class="page banner_container" attribute to control the layout of the banner container

The first item inside the banner container is the banner section that contains our banner heading and banner subheading. We create this item using the <div> element and assign it:

• The class="banner_section" attribute to control the layout of the banner section

The first item inside this banner section is our banner heading. We create this item using the <h2> element and assign it:

• The class="banner_heading" attribute to control the style of the banner heading

The second item inside this banner section is our banner subheading. We create this item using the <p> element and assign it:

• The class="banner_subheading" attribute to control the style of the banner subheading

The second item inside the banner container is the banner section that contains our banner button. We create this item using the <div> element and assign it:

• The class="banner_section" attribute to control the layout of the banner section

Inside this banner section we create our banner button using the <p> element and assign it:

• The class="banner_button" attribute to control the layout of the banner button

And inside the banner button we use the <a> element to create a banner button link that directs visitors to the main content of our page when clicked. We assign it:

• The href="#main" attribute to specify the destination of the banner button link
• The class="banner_button_link" attribute to control the style of the banner button link

Next the CSS:

                  
* {

  box-sizing: border-box;

  margin: 0;

  border: 0;

  padding: 0;

}



/* Page */



.page {

  max-width: 640px;

  margin: 0 auto;

}



@media (min-width: 960px) {

  .page {max-width: 960px;}

}




/* Banner */



.banner {background: url('my-image.jpg') no-repeat center center / cover fixed;}



.banner_container {

  display: flex;

  flex-flow: column nowrap;

  justify-content: center;

  height: 100vh;

  padding: 16px 0;

}



.banner_section {padding: 8px;}



.banner_heading {

  padding: 8px;

  font: bold 32px / 1.5 sans-serif;

  text-align: center;

  color: #FFFFFF;

  text-shadow: 0 4px 8px rgba(0, 0, 0, 1);

}



.banner_subheading {

  padding: 8px;

  font: italic 16px / 1.5 sans-serif;

  text-align: center;

  color: #FFFFFF;

  text-shadow: 0 4px 8px rgba(0, 0, 0, 1);

}



.banner_button {

  margin: 0 auto;

  padding: 8px;

}



.banner_button_link {

  display: block;

  border-radius: 28px;

  padding: 16px;

  font: 16px / 1.5 sans-serif;

  text-decoration: none;

  text-align: center;

  color: #000000;

  background: #FFBF00;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);

}



@media (min-width: 480px) {



  .banner_heading {font-size: 48px;}



  .banner_button {width: 50%;}



}

First, we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.

Next we create the .page CSS rule to control the layout of our page area so that:

• The maximum width is 640px on small and medium screens
• The maximum width is 960px on large screens

Then, we create the .banner CSS rule to control the style of our banner area. We include:

• The background: url('my-image.jpg') no-repeat center center / cover fixed; property to specify:
  • The location and name of the image file
  • That the image does not repeat
  • That the image is horizontally and vertically centered
  • That the image covers the entire banner area
  • That the image is fixed and does not scroll with the page

Next we create the .banner_container CSS rule to control the layout of our banner container. We include:

• The display: flex; flex-flow: column nowrap; justify-content: center; properties to vertically center the content of the banner container
• The height: 100vh; property to specify that the banner container is the full height of the screen

Then, we create the .banner_section CSS rule to control the layout of our banner sections.

Next we create the .banner_heading CSS rule to control the style of our banner heading. We include:

• The text-shadow: 0 4px 8px rgba(0, 0, 0, 1); property to apply a text shadow to the banner heading to make it more legible atop the image

Note that the banner heading font size changes from 32px on small screens to 48px on medium and large screens.

Then, we create the .banner_subheading CSS rule to control the style of our banner subheading. We include:

• The text-shadow: 0 4px 8px rgba(0, 0, 0, 1); property to apply a text shadow to the banner subheading to make it more legible atop the image

Next we create the .banner_button CSS rule to control the layout of our banner button. Note that the width of the banner button changes to 50% on medium and large screens.

Finally, we create the .banner_button_link CSS rule to control the style of our banner button link.

Now the JavaScript:

                  
// Smooth Scrolling



$('a').click(function() {

  $('html, body').animate({

    scrollTop: $($.attr(this, 'href')).offset().top

  }, 500);

  return false;

});

Here we create some JavaScript code (using jQuery) that allows our "Explore" button to smoothly scroll to the main content area when clicked. Including this code is entirely optional. It simply provides an improved user experience for visitors with JavaScript-enabled devices.

And there you have it! A responsive banner with text.

The demonstration provided expands upon this code to show the banner in a complete web page environment. It also includes extra features like hover states.

To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.

To customize the demonstration, first save a local copy of the document on your computer. Then, open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.

Banner with Text Box

In our fourth example, we'll build upon our Banner with Text design to include a text box overlay:

Open Demo

A banner with a text box improves legibility and increases visual emphasis by creating more contrast between the words and the image.

The construction of the banner with a text box is similar to our Banner with Text design. But we add:

• HTML and CSS to create the text box

Let's start with the HTML used to create our responsive banner with a text box:

                  
<!-- Banner -->



<div class="banner">



  <div class="page banner_container-1">



    <div class="banner_container-2">



      <div class="banner_section">



        <h2 class="banner_heading">

          My Page</h2>



        <p class="banner_subheading">

          My Message to Visitors</p>



      </div>



      <div class="banner_section">



        <p class="banner_button">

          <a href="#main"

          class="banner_button_link">

            Explore</a></p>



      </div>



    </div>



  </div>



</div>

First, we create our banner area using the <div> element and assign it:

• The class="banner" attribute to control the style of the banner area

Inside the banner area we create our banner container using the <div> element and assign it:

• The class="page banner_container-1" attribute to control the layout of the banner container

Inside the banner container we create our banner text box using the <div> element and assign it:

• The class="banner_container-2" attribute to control the style of the banner text box

The first item inside the banner text box is the banner section that contains our banner heading and banner subheading. We create this item using the <div> element and assign it:

• The class="banner_section" attribute to control the layout of the banner section

The first item inside this banner section is our banner heading. We create this item using the <h2> element and assign it:

• The class="banner_heading" attribute to control the style of the banner heading

The second item inside this banner section is our banner subheading. We create this item using the <p> element and assign it:

• The class="banner_subheading" attribute to control the style of the banner subheading

The second item inside the banner text box is the banner section that contains our banner button. We create this item using the <div> element and assign it:

• The class="banner_section" attribute to control the layout of the banner section

Inside this banner section we create our banner button using the <p> element and assign it:

• The class="banner_button" attribute to control the layout of the banner button

And inside the banner button we use the <a> element to create a banner button link that directs visitors to the main content of our page when clicked. We assign it:

• The href="#main" attribute to specify the destination of the banner button link
• The class="banner_button_link" attribute to control the style of the banner button link

Next the CSS:

                  
* {

  box-sizing: border-box;

  margin: 0;

  border: 0;

  padding: 0;

}



/* Page */



.page {

  max-width: 640px;

  margin: 0 auto;

}



@media (min-width: 960px) {

  .page {max-width: 960px;}

}




/* Banner */



.banner {background: url('my-image.jpg') no-repeat center center / cover fixed;}



.banner_container-1 {

  display: flex;

  flex-flow: column nowrap;

  justify-content: center;

  height: 100vh;

  padding: 16px;

}



.banner_container-2 {

  border-radius: 8px;

  padding: 16px 0;

  background: rgba(0, 0, 0, 0.75);

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);

}



.banner_section {padding: 8px;}



.banner_heading {

  padding: 8px;

  font: bold 32px / 1.5 sans-serif;

  text-align: center;

  color: #FFFFFF;

}



.banner_subheading {

  padding: 8px;

  font: italic 16px / 1.5 sans-serif;

  text-align: center;

  color: #FFFFFF;

}



.banner_button {

  margin: 0 auto;

  padding: 8px;

}



.banner_button_link {

  display: block;

  border-radius: 28px;

  padding: 16px;

  font: 16px / 1.5 sans-serif;

  text-decoration: none;

  text-align: center;

  color: #000000;

  background: #FFBF00;

}



@media (min-width: 480px) {



  .banner_heading {font-size: 48px;}



  .banner_button {width: 50%;}



}

First, we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.

Next we create the .page CSS rule to control the layout of our page area so that:

• The maximum width is 640px on small and medium screens
• The maximum width is 960px on large screens

Then, we create the .banner CSS rule to control the style of our banner area. We include:

• The background: url('my-image.jpg') no-repeat center center / cover fixed; property to specify:
  • The location and name of the image file
  • That the image does not repeat
  • That the image is horizontally and vertically centered
  • That the image covers the entire banner area
  • That the image is fixed and does not scroll with the page

Next we create the .banner_container-1 CSS rule to control the layout of our banner container. We include:

• The display: flex; flex-flow: column nowrap; justify-content: center; properties to vertically center the content of the banner container
• The height: 100vh; property to specify that the banner container is the full height of the screen

Then, we create the .banner_container-2 CSS rule to control the style of our banner text box. We include:

• The background: rgba(0, 0, 0, 0.75); property to apply a translucent black background to the text box

Next we create the .banner_section CSS rule to control the layout of our banner sections.

Then, we create the .banner_heading CSS rule to control the style of our banner heading. Note that the banner heading font size changes from 32px on small screens to 48px on medium and large screens.

Next we create the .banner_subheading CSS rule to control the style of our banner subheading.

Then, we create the .banner_button CSS rule to control the layout of our banner button. Note that the width of the banner button changes to 50% on medium and large screens.

Finally, we create the .banner_button_link CSS rule to control the style of our banner button link.

Now the JavaScript:

                  
// Smooth Scrolling



$('a').click(function() {

  $('html, body').animate({

    scrollTop: $($.attr(this, 'href')).offset().top

  }, 500);

  return false;

});

Here we create some JavaScript code (using jQuery) that allows our "Explore" button to smoothly scroll to the main content area when clicked. Including this code is entirely optional. It simply provides an improved user experience for visitors with JavaScript-enabled devices.

And there you have it! A responsive banner with a text box.

The demonstration provided expands upon this code to show the banner in a complete web page environment. It also includes extra features like hover states.

To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.

To customize the demonstration, first save a local copy of the document on your computer. Then, open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.