[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 367
  • Last Modified:

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?
#headercontent
{
    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
<body>
    <form id="form1" runat="server">   
<div id="headercontent">
</div>

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

Open in new window

Thanks.
0
zhshqzyc
Asked:
zhshqzyc
2 Solutions
 
Frosty555Commented:
css3 supports stretching the background image, but it is not supported by very many browsers at the moment so you will have compatibility issues.

http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

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.

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

Related article:
http://www.w3schools.com/cssref/css3_pr_background-size.asp

Also try this article:
http://css-tricks.com/766-how-to-resizeable-background-image/
0
 
LZ1Commented:
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.  

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now