?
Solved

How do I overlay a banner image with CSS?

Posted on 2011-04-18
13
Medium Priority
?
2,054 Views
Last Modified: 2012-05-11
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?
0
Comment
Question by:RickCurtis
  • 7
  • 5
13 Comments
 
LVL 3

Expert Comment

by:JChrison
ID: 35420446
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
 

Author Comment

by:RickCurtis
ID: 35420696
Yes, I've seen references to z-index...but I'm going to need some code examples, though.
0
 
LVL 22

Accepted Solution

by:
remorina earned 2000 total points
ID: 35420748
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:RickCurtis
ID: 35421002
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
 
LVL 22

Expert Comment

by:remorina
ID: 35421073
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
 

Author Comment

by:RickCurtis
ID: 35421247
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
 
LVL 22

Expert Comment

by:remorina
ID: 35421379
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
 

Author Comment

by:RickCurtis
ID: 35423377
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
 

Author Comment

by:RickCurtis
ID: 35431816
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
 
LVL 22

Expert Comment

by:remorina
ID: 35437657
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
 

Author Comment

by:RickCurtis
ID: 35437859
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
 

Author Closing Comment

by:RickCurtis
ID: 35437862
Thanks for hanging in there with me and being so patient!!
0
 
LVL 22

Expert Comment

by:remorina
ID: 35437887
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question