How do I overlay a banner image with CSS?

I have a fluid website theme I am trying to modify with a banner.  (Existing code below.)  I need a repeating background image which repeats all the way across the banner area.  This is working with the code below.  I now need to add an overlaid "main" image of the same height.  The end result should look like the centered image with left and right background fill no matter what screen resolution is being used.  Main centered image is 902px wide.  I realize this is easily done with absolute positioning and disregarding screen resolution...but I want to accomodate as many resolutions as possible.  I have been able to accomplish the centering of the main image without any background fill, but it leaves solid white blocks on the left & right.

Existing CSS:

#headersection{
background: #FFF url(images/background_fill.png) repeat-x;
height: 105px;
width: 100%;
border-top: 1px solid #7D88A4;
border-bottom: 1px solid #7D88A4;
text-align: center;
}


Calling HTML:

<td  colspan='3'>
<div id='headersection'>
&nbsp;
</div>

The "overlay" method *seems* like it would be the easiest...but I am open to other methods.
Alternatively, I can visualize using the background_fill.png for x pixels, starting the main centered image and then finishing out with more background_fill.png.

Any ideas?
RickCurtisAsked:
Who is Participating?
 
remorinaCommented:
Hello RickCurtis,
I seem to be missing something here, your question seem to only require a 902px banner image centered on a repeated background regardless of screen resolution, This alone should not require positioning or any z-index while if you're trying to place an overlay over the banner that is where you would need appropriate layering.
 
I have attached an example that should demonstrate both cases, if this is not what you are after can you kindly attach an image or a draft that makes it more clear of what you're trying to achieve ?

Cheers!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Banner Overlay</title>
    <style type="text/css">
      body {font:normal 12px Arial, Helvetica, Serif;}
      #headersection{
        background: #FFF url(http://www.buytile.com/bmz_cache/f/f33d6475a396d28c96543f5db8155b89.image.105x105.jpg) repeat-x;
        height: 105px;
        width: 100%;
        border-top: 1px solid #7D88A4;
        border-bottom: 1px solid #7D88A4;
        text-align: center;
        position:relative;
        }
        .banner {
            position:relative;
            width:902px;
            margin:0 auto;
            z-index:10;
        }
        .overlay {
            font-size:36px;
            font-weight:bold;
            color:#000;
            position:absolute;
            width:902px;
            height:105px;
            line-height:105px;
            z-index:30;
            text-align:center;
        }
    </style>
</head>
<body>
    <div>
        <div id="headersection">
            <div class="banner">
                <div class="overlay">Overlay</div>
                <img src="http://adopt.childrenshope.net/bitrix/templates/chiadoption/images/header/colorado.jpg" width="902" height="105" alt="" />
            </div>
        </div>
    </div>
</body>
</html>

Open in new window

0
 
JChrisonCommented:
You can play with z-index.
Position the new item at the same x-y position with your banner but make z-index higher that the banner's one.

So you will overlay your banner with anything you want.
0
 
RickCurtisAuthor Commented:
Yes, I've seen references to z-index...but I'm going to need some code examples, though.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
RickCurtisAuthor Commented:
Your code example does exactly what I'm trying to accomplish (minus the word "Overlay")...but I'm having trouble adapting it into my theme.  (Sorry...not a coder, obviously!)

I get a "Parse error: syntax error, unexpected T_STRING" on the line for the img src.

I believe I have correctly pulled in the CSS banner & overlay sections.

     <td  colspan='3'>
         <div id='headersection'>
           &nbsp;
       <div class="banner">
           <div class="overlay"></div>
               <img src="images/xxx.png" width="902" height="105" alt="" />
     </div>
     </div>
    </td>
0
 
remorinaCommented:
This sounds like unescaped PHP quotes

Try changing the double quotes to single quotesas below, you also don't need neither the overlay div nor the &nbsp;

You may also remove the class .overlay from the CSS



<td  colspan='3'>
         <div id='headersection'>
       <div class='banner'>
               <img src='images/xxx.png' width='902' height='105' alt='' />
     </div>
     </div>
    </td>

Open in new window

0
 
RickCurtisAuthor Commented:
Well...that took care of the syntax problem, but all I'm getting is the background fill across the banner area...no banner.

Here's the CSS:

#headersection{

background: #FFF url(images/background_fill.png) repeat-x;
height: 105px;
width: 100%;
border-top: 1px solid #7D88A4;
border-bottom: 1px solid #7D88A4;
text-align: center;
}

.banner {
position:relative;
width:902px;
margin:0 auto;
z-index:10;
}

HTML:

<td  colspan='3'>
         <div id='headersection'>
       <div class='banner'>
               <img src='images/banner.png' width='902' height='105' alt='' />
     </div>
     </div>
    </td>
0
 
remorinaCommented:
that's odd,
Have you checked if your image is loading or you might have a broken link?
Can you provide a link or upload the images as well so I can work out the example using your actual images.

You can try viewing it in IE as well so that if the image is broken you'd be able to see the broken image rather than firefox as it doesn't show a broken image.
0
 
RickCurtisAuthor Commented:
I'm using IE...have been all along since that is what the majority of my end users are going to be using.  I loaded FF just for grins...no difference.  The site is not published yet...only viewable using a special DNS "preview" mode.  There's nothing unusual about the image...just something I put together in Paint.  No transparency or anything...just a straight image 902x105.  And as you say, IE should complain about a broken link...nothing.  I'm not opposed to supplying the images...would just rather not post them here.
0
 
RickCurtisAuthor Commented:
I took your example code and plugged in my png graphics...it worked.  I then built the same basic table element structure around the section of code as is used in the real theme itself, still in the sample code...that worked.

There appears to be someting prior to the header section in the theme.php or the CSS that is inhibiting the proper disply of this z-index graphic.  Any clue as to what I should look for?  I feel like we are really close.  Please don't give up on me now!
0
 
remorinaCommented:
It seems there's something that is not behaving right.
First I'm wondering why you're using tables at all for layout? a header should be able to stretch across the screen width without the need to use a table.

Also if you have a table cell already, specifying the background colour or image to that table cell, along with a text-align:center and placing your image normally should achieve what you're after without any complicated CSS or positioning.

I believe there might be somekind of a missing tag or CSS rules that is messing up, try to validate your code at http://validator.w3.org/.

If you were still unable to fix it, try opening the page in the browser and then view the page source and attach or post the full HTML rendered along with the CSS and your PNG image and background.
0
 
RickCurtisAuthor Commented:
OK...I *really* feel stupid.  I just found out I was working in the wrong section of my theme file!  Once I found the right spot, everythying fell into place.  Thank you very much for your help...the posted code works perfectly.
0
 
RickCurtisAuthor Commented:
Thanks for hanging in there with me and being so patient!!
0
 
remorinaCommented:
Don't worry we all fell for this at least once before :)

You're welcome, I'm glad you've got it sorted it out.

Cheers
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.