Scretch an image in the header area.

Hello, I have an image that has the size 180x80. It will be the banner image on the header area.
Suppose the width is 800px, how to stretch it by using CSS?
    background-position: center top;
    width: 800px;
    height: 80px;
    margin: 0;
    border: solid #333;
    border-width: 0 0 2px 0;
    background-color: #FF9900;
    background-image: url('images/sqlserver.jpg');
    background-repeat: no-repeat;
    z-index: 1;

Open in new window

Master page
    <form id="form1" runat="server">   
<div id="headercontent">

<div id="rightcontent">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

Open in new window

Who is Participating?
Frosty555Connect With a Mentor Commented:
css3 supports stretching the background image, but it is not supported by very many browsers at the moment so you will have compatibility issues.

You need to use a graphic editor and manually stretch the background to the desired size, or use an <img> tag, which you can explicitly set the width and height of which will cause (rather ugly) stretching.

Try using code in your CSS and see if that works (supported in CSS3):
background-size: 100% 100%;

Related article:

Also try this article:
LZ1Connect With a Mentor Commented:
You can't really stretch a background image via just CSS the way your thinking.  Images like that are generally static and made to fit the container.  

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.