Solved

Scretch an image in the header area.

Posted on 2011-09-21
3
337 Views
Last Modified: 2012-05-12
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
Comment
Question by:zhshqzyc
3 Comments
 
LVL 31

Accepted Solution

by:
Frosty555 earned 250 total points
ID: 36573812
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
 
LVL 15

Expert Comment

by:pateljitu
ID: 36573839
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
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 250 total points
ID: 36573844
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jquery datatables, asp.net MVC 9 51
ASP.NET(C#) Eliminating weekends from a date range 2 45
Sort Order Icons on HTML Table 3 33
How to resize a div in html 3 37
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

856 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