Top Navigation Menu

Add a Logo and Responsive Header Image to the Canvas Theme Part 6A

How to Add a Logo and Responsive
Header Image to the Canvas Theme

How to Create an eCommerce Store with WordPress, WooCommerce & the Canvas Theme Part 6A

We are continuing on with our series on how to create an ecommerce store using WordPress. We are going to focus on the header area of the Canvas theme in this video tutorial. We will do a couple of different things:

  • Set the Logo in the header
  • Set a header background image

Make The Header Background Image Responsive

By default, the header background image is not responsive. I don’t know what the developers of Canvas didn’t include this one important item, but nonetheless, we will want our header image to look good on all devices. So with a little CSS and images created for different devices, we will mage the header background images responsive.

To get decent images that responds correctly for the header background, I made one header image in to three different sizes. I designed the image for the background header to also allow the logo to look good in the display. I could have done a better job, but….

Image Sizes

  • The first image I created to fill the full width of our header which is 1600 x 160px.
  • The second image I created for the smaller desktop and laptop screen sizes at 1200 x 120px width.
  • The third I created for the tablets and landscape in the smart phones at 767 x 77px.
  • For device screen less than 480px, we are not going to display the image, we will just display the logo.

The CSS

  • I am going to introduce a CSS property called background-size:contain; that will restrain our background header image and cause it to respond nicely.
  • We will also look and using background-repeat:no-repeat; CSS rule so our image does not multiply.
  • We will use @media and the background-image: url(); CSS rules to tell the browser which image it should display depending on the width of the screen viewing the page. We will use and go over the functionality of the !important CSS rule.
  • Lastly we will use the background-position: center; to tweak the way our background images sets in the div container.

Code Snippets Used in this Video

This goes in to your CHILD theme style.css.

/** Header **/  #header {      background-size:contain;      background-repeat:no-repeat;  }  @media only screen and (min-width: 1201px) {  #header {      background-image: url('https://192.185.137.78/~dev/wp-content/uploads/2015/08/petstore-header6.jpg') !important;      background-position: center !important;     }  }  @media only screen and (min-width: 768px) and (max-width: 1200px) {  #header {      background-image: url('https://192.185.137.78/~dev/wp-content/uploads/2015/08/petstore-header-1200px.jpg') !important;      background-position: center !important;     }  }  @media only screen and (min-width: 481px) and (max-width: 767px) {  #header {      background-image: url('https://192.185.137.78/~dev/wp-content/uploads/2015/08/petstore-header-767px.jpg') !important;      background-position: center !important;     }  }  /***  This rule is not required even though I used it in the video. I wasn't thinking:)  In the rules above nothing will display for background-image unless the screen is at least 480px wide.  @media only screen and (max-width: 480px) {  #header {      background-image: none !important;     }  }  **/  

Child Theme

Download the complete Canvas Child Theme to the Point of the end of this video.

Learn how to create a Canvas Child Theme

(169)

No comments yet.

Leave a Reply