Make Your Logo Pop Out From Your Banner Using CSS

– Posted in: CSS, Web Design

I love a challenge! I really do. Yes, I know… I snarl & growl. My sailor’s mouth gets the best of me, but in the end… I really do love a challenge, especially when I figure it all out and make it work. I have always believed and have always taught my boys that if you can wrap your head around an idea, you can do it. So, today’s challenge: To make a logo pop up above the border of a header and still look like there is a padded border and to do this without making the whole header as a single image. Well, I accomplished my challenge. I actually solved it two different ways.

In this challenge, the banner has to shrink to any screen size and run a slideshow. But instead of making it all one image to reach across the page, and then place it as a background with the slideshow on top, I broke the banner down into 4 parts.

  1. Background color
  2. Logo
  3. Text
  4. Slideshow

There was one caveat. The logo had to be above what looked like the banner. So it had to be in the padding area at the top of the screen. This effect makes it look as if the logo is breaking out of the banner borders. I’ve created plenty of these images that do this, but now my challenge is to do it in CSS.

Let me sidestep for a moment. My reason for doing the banner this way is to lighten up the web page load on the client’s website. If the client posts a lot of images and video in their pages & posts, you don’t want your layout to add to their heavy load. Not everyone knows to use small images on their blogs and websites either. So, my job is to make sure the template actually loads fast.

I was stumped. It was kind of like a brain freeze. I’ve done this before, but I couldn’t remember how to do. I had tunnel vision and was honed in on creating one design and was then thrown a curve ball and had to do it another way.

I need to give credit where credit is due. If it weren’t for Rick Anderson over at BYOB Website, I’d still be working on this problem. So thank you, Rick! Rick has been a great resource in learning how to build with WordPress. His tutorials are very well made and very easy to follow. He is always available to answer even the most mundane questions in his forum. I know, because I have asked them.

Ok, back to the challenge.

In this website, I split the banner into 3 parts, or columns. One column was the logo; the next was the site title and site tagline, and then lastly, the slideshow. Around the banner is a border of padding that is about 25px wide. The main goal is to bring the logo image up so part of the image is over the padded area but leave the other two cells where they are.

Draft 1

The chef’s hat needs to pop out of the blue banner and into the border.

 

 

One way I solved this was to make an image that about 25px X 300px the top 25px should be the color of the border of your choice. For me it is purple. The remaining 275px should be the color of your background. So your image looks like this.

head-bkgrd

This strip has to repeat along the x-axis, so that it goes across the banner. I did this with CSS code.

#banner { background: url ("images/head-bkgrd.png"); }

You can choose to use an absolute path or relative, as I did here.

Now, this was not an ideal method for me. Yes, this method allowed me to get my logo up where I wanted it, but when I begin to put all my @media queries in to make my page, responsive (compatible to any screen size), this image isn’t really going to shrink much on the height unless I have a replacement image for smaller screens. I don’t like complicated code. So, I kept thinking and kept trying to understand what else I could do to make this more conducive to what I wanted to do.

At my most frustrating moment, I remembered a website I had built that had 3 different elements to its background. In that website, I layered the elements one above the other, creating a pattern with a gradient and color. It was one of those ‘facepalm’ moments where you think, ‘Wow! How could I have forgotten that?’

Here’s what I did. I created a very small image that would become my border area. It is only 2px X 25px and it is the color of my border.

top-pad

Now, I want this behind all three columns in my header, but I want it only at the top. To do this, you must set the image in the <div> that holds all three columns. I call this <div> #banner.  In this <div> you want to make the background color your main or most prevalent color. For me this is the light blue. Then, you want to add the little image that will make your border. You’ll want to tell that image where you want it and what you want it to do. I want the position to be at the left and at the top and I want it to run along the top of the banner. So the code looks like this.

#banner {

     background-color: #a8e5f8;

     background-image: url("images/top-pad.png");

     background-position: left top;

     background-repeat: repeat-x;

}

I made the logo with a transparent background and placed the top of the chef hat at the very top of the image. So when I removed all padding from the cell and the banner <div> tags, the image butted up against the top of the page. Now that I don’t have that padding, I do have to make adjustments for the other two cells so to make them align properly and look balanced. Here is the final look.

kce-final

The final banner looks like this.

 

I hope by sharing this challenge it helps you to understand a little more of the inner workings of placing elements in a web page.

Check out this website at http://kidchefeliana.com. I hope to have this new theme up this weekend after a few more minor changes.

0 comments… add one

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.