Solved

Scretch an image in the header area.

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now