?
Solved

Scretch an image in the header area.

Posted on 2011-09-21
3
Medium Priority
?
354 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 31

Accepted Solution

by:
Frosty555 earned 1000 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 1000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month9 days, 7 hours left to enroll

762 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