Solved

Scretch an image in the header area.

Posted on 2011-09-21
3
331 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

776 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