Hello,
In' the files below is what I'm trying to achieve (corner image at the top right area). I can't figure out how to do it. I would also like it too' wrap at a smaller resolution. Please advise. Thank you in advance.

Here is the code I've used:

body {
background:#fff;
margin:0;
color:#333333;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#menuContainer {
text-align: center;
}

#MenuBar {
position: relative;
background-image: url(images/tab_bg.gif);
background-position: top;
background-repeat: repeat-x;
padding-top: 0px;
margin-bottom: 0px;
line-height: 2;
padding-bottom: 0px;
}

#MenuOuterWrap {
text-align: left;
padding: 0px 0px 0px;
}

#MenuInnerWrap {
display: table;
width: 100%;
margin: 0px;
padding: 0px;
}

#Menu {
font-size: 10px;
display: block;
margin-left: 0px;
margin-right: 0px;
text-align: left;
margin-bottom: 0px;
font-weight: bold;
}

#Menu ul {
margin: 5px 0px 0px;
list-style: none;
padding: 0px;
}

#Menu li {
display: inline;
margin: 0px -3px 0px -1px;
white-space: nowrap;
}

.ltab {
display: inline;
background-image: url(images/norm_left.gif);
background-repeat: no-repeat;
background-position: center;
}

#Menu a {
text-decoration: none;
color: #000;
background-image: url(images/norm_right.gif);
background-repeat: no-repeat;
background-position: center;
padding: 10px 10px 5px 8px;
margin-top: 10px;
margin-bottom: 10px;
text-transform: uppercase;
}

#Menu a:hover {
color: #fff;
}

#Menu #current #ltab {
background-image: url(images/norm_left_on.gif);
padding: 10px 0px 5px 0px;
}

#Menu #current #ltab a {
background-image: url(images/norm_left_on.gif);
}

#Menu #current a {
background-image: url(images/norm_right_on.gif);
color: #666666;
}

#Menu #current a:hover {
color: #f28411;
}

#home {
background-image: url(images/corner.gif);
background-repeat: no-repeat;
background-position: top right;
text-align: right;
margin-bottom: 15px;
margin-right: 0px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
font-size: 11px;
color: #333;
background-color: #ced49c;
}

#home ul {
line-height: 1.4em;
text-align: middle;
margin: 0px;
padding: 0px;
}

#home li {
display: inline;
}

#home a {
color: #333;
padding-left: 6px;
background-position: left center;
padding-right: 10px;
text-transform: capitalize;
text-decoration:none;
}

#home a:hover {
padding-left: 6px;
text-decoration:underline;
}

#searchtitle{
font-weight : bold;
font-size : 1.2em;
margin-bottom : 3px;
color: #fff;
}

.search {
background-color: #FFFFFF;
margin: 0px 3px 0px 0px;
width: 70%;
border: 1px solid #7f9db9;
background-position: left top;
vertical-align: middle;
padding-top: 2px;
padding-left: 5px;
display: inline;
}


#btn_cart {
padding: 0px 10px 0px 0px;
text-align: right;
margin-top: 0px;
font-weight: bold;
}

#btn_cart a{
background-image: url(images/cart2.gif);
background-repeat: no-repeat;
color: #fff;
background-position: left center;
margin: 10px 0px;
padding: 2px 0px 2px 25px;
text-decoration:underline;
}

#btn_cart a:hover{
text-decoration:none;

}

#leftColumn {
background-image: url(images/dotted_vertical.gif);
background-repeat: repeat-y;
background-position: right;
width: 180px;
padding-right: 10px;
}

#rightColumn {
background-image: url(images/dotted_vertical.gif);
background-repeat: repeat-y;
background-position: left;
width: 170px;
}

.divider {
background-image: url(images/dotted_vertical.gif);
background-repeat: repeat-y;
background-position: center 60px;
}

.divider1 {
background-image: url(images/dotted_vertical.gif);
background-repeat: repeat-y;
background-position: center 60px;
}

label {
cursor : hand;
font-weight: bold;
color: #999999;
text-align: left;
margin-top: 2px;
display: block;
margin-bottom: 0px;
padding: 0px;
}

#message {
color : #333333;
background-color : #e4eace;
text-align : left;
border-bottom: 1px solid #b1d017;
text-transform: none;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
margin: 0px;
clear: both;
font-size: 11px;
width: 100%;
}

html {
color : #333333;
background-color : white;
}

img {
border-style : none;
}

input {
padding: 2px;
vertical-align: middle;
background-color: #FFFAF4;
font-size: 11px;
color: #666666;
margin-top: 2px;
margin-bottom: 2px;
border: 1px solid #CCCCCC;
}

.btn_go {
margin-top: 10px;
}

a {
text-decoration : none;
}

a:hover {
text-decoration : underline;
}

#inner_wrapper {
padding-top : 0px;
}

#heading{
background-color : black;
margin : 0px;
padding : 0px;
}

#wrapper {
min-width: 780px;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}

#main {
float : left;
width : 100%;
padding : 0;
margin : 0 0 0 -190px;
}

#header {
width : 100%;
margin : 0px;
background-color : #000000;
font-size: 10px;
}

#headerlogo{
float : left;
width : 30%;
color : white;
background-color : black;
margin-top : 20px;
}

#headersearch{
width : 100%;
color : #000000;
margin-top : 14px;
margin-bottom: 15px;
}

#headersearch btn{
width : 100%;
color : white;
margin-top : 10px;
margin-bottom: 15px;
background-color: #FFFFFF;
padding: 20px;
}

#searchtitle{
font-weight : bold;
font-size : 1.2em;
margin-bottom : 3px;
}

.searchField {
margin-left : 0px;
margin-top : 3px;
margin-bottom : 0px;
font-size : 0.8em;
}

a:link {color: #084292;text-decoration: underline;}
a:active {color: #1574DD; text-decoration: none; }
a:visited {color: #084292; text-decoration: underline; }
a:hover {text-decoration: underline; color: #f28411;}

h1 {
font-size: 18px;
font-weight: bold;
margin-bottom: 0.3em;
padding: 0px;
margin-top: 0.1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: capitalize;
color: #333333;
}

h6 {
font-size: 0.8em;
font-weight: bold;
color: #F28411;
}

.dottedrule {
background-image: url(images/dotted_rule.gif);
background-repeat: repeat-x;
padding-top: 5px;
padding-bottom: 0px;
margin-top: 8px;
clear: both;
margin-bottom: 8px;
}

select {
background-color: #FFFAF4;
font-size: 11px;
color: #666666;
width: auto;
height: auto;
margin-bottom: 5px;
margin-top: 2px;
vertical-align: middle;
border: 1px solid #CCCCCC;
}

p {
margin: 0px 0px 5px;
padding: 0px;
line-height: 1.2em;
}

.smallfieldcell select {
background-color: #F9FCFF;
color: #666666;
font-size: 9px;
width: 12em;
margin: 0px;
padding: 0px;
}

.clear {
clear: both;
padding: 0px;
margin: 0px;
}

.dottedrule2 {
background-image: url(images/dotted_rule.gif);
background-repeat: repeat-x;
padding-top: 5px;
padding-bottom: 0px;
margin-top: 10px;
clear: both;
margin-bottom: 10px;
}

.midfieldcell {
width: 130px;
margin: 0px;
padding: 0px;
font-size: 10px;
}

.smallfieldcell {
width: 90px;
margin: 0px;
padding: 0px;
font-size: 9px;
}

#leftColumn ul {
margin: 3px;
padding: 0px;
}

h2 {
font-size: 16px;
font-weight: bold;
margin-bottom: 0.3em;
padding: 0px;
margin-top: 0.8em;
}

#leftColumn li {
margin: 0px;
padding: 3px 0px 2px 10px;
list-style-type: none;
}

#leftColumn h2 {
color: #f28411;
font-size: 1em;
font-weight: bold;
display: block;
padding: 5px 3px 5px 10px;
background-color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #f1f1f1;
border-right-color: #f1f1f1;
border-bottom-color: #cccccc;
border-left-color: #f28411;
margin-top: 10px;
text-transform: uppercase;
}

#leftColumn div.active {
background-color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #f28411;
border-top-style: none;
padding: 0px 0px 5px;
margin-top: 5px;
}

#leftColumn div.active h2 {
color: #F28411;
font-size: 1em;
font-weight: bold;
background-color: #FFF9F2;
display: block;
border-top-style: solid;
border-top-color: #F28411;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
border-top-width: 1px;
border-bottom-style: none;
}


h3 {
font-size: 11px;
margin-bottom: 5px;
padding: 0px;
margin-top: 0px;
color: #333333;
}

.bigfieldcell {
width: 200px;
margin: 0px;
padding: 2px;
font-size: 0.8em;
}

.cartPrice {
font-size: 12px;
padding: 2px;
color: #FA8005;
font-weight: bold;
}

.left {
float: left;
}

.right {
float: right;
padding-left: 20px;
text-align: left;
}

#headersearch .searchlink {
color: #FFFFFF;
}

#headersearch #search {
}

#headersearch img {
margin-right: 5px;
display: inline;
vertical-align: middle;
}

#middleColumn {
padding-right: 10px;
padding-left: 10px;
}

#searchlinks {
color: #FFFFFF;
margin-right: 5px;
margin-top: 5px;
}

#searchlinks a {
white-space: nowrap;
color: #FFFFFF;
}

#searchlinks a {
white-space: nowrap;
color: #FFFFFF;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-decoration:underline;
}

#searchlinks a:hover {
text-decoration: none;
}

make the image a css background. It will stretch, but nat change sizes. also, if its live, could you post a link?

Unfortunately it's not live yet. I tried to make the image as background (in #home), but it didn't work.

ok. Can I see the html? you might consider separating the things and use the background similar to this.

I'm sorry if thats way off from the effect you're looking for. You could also look at this article.

maybe thats closer to what you're looking for.

Here is the HTML. Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tabbed browsing</title>
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="header">
<tr>
<td width="20%" scope="col"><div align="center">LOGO</div></td>
<td align="center" valign="top" scope="col"><div id="headersearch">
<div align="left">
<div id="searchtitle">SEARCH</div>
<div class="clear"></div><div><input name="search" type="text" class="search" id="search" size="40" alt="SEARCH HERE" /><img src="images/btn_go2.gif" alt="GO" width="46" height="20" /></div>
<div class="clear"></div>
<div id="searchlinks"> <input name="checkbox" type="checkbox" class="noborder" value="checkbox" />
<label>Search specific criteria only</label> | <a href="#">Advanced Search</a></div>
</div>
</div>
</td>
<td width="45%" valign="top"><div id="home">
<ul >
<li> <a href="#">Login</a> | </li>
<li> <a href="#">About us</a> | </li>
<li><a href="#">Contact us</a> | </li>
<li><a href="#">Help</a> | </li>
<li><select name="select" class="midfieldcell" id="select">
<option>International Sites</option>
<option>Mexico</option>
<option>United States</option>
</select></li>
</ul>
</div>
<div id="btn_cart"> <a href="#">SHOPPING BASKET <span class="cartPrice">$100.78</span> (2 ITEMS)</a> </div></td>
</tr>
</table>
<div id="MenuBar">
<div id="MenuOuterWrap">
<div id="MenuInnerWrap">
<div id="Menu">
<ul>
<li id="tab1"><span class="ltab">&nbsp;</span><a href="#">BESPOKE 1</a></li><li id="tab2"><span class="ltab">&nbsp;</span><a href="#">BESPOKE 2</a></li>
<li id="tab3"><span class="ltab">&nbsp;</span><a href="#">BESPOKE 3</a></li>
<li id="tab4"><span class="ltab">&nbsp;</span><a href="#">BESPOKE 4</a></li>
<li id="tab5"><span class="ltab">&nbsp;</span><a href="#">BESPOKE 5</a></li>
<li id="tab6"><span class="ltab">&nbsp;</span><a href="#">BESPOKE 6</a></li>
<li id="tab7"><span class="ltab">&nbsp;</span><a href="#" >BESPOKE 7</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="message"><p>Welcome back <strong>Name</strong>, if you are not Name, <a href="#">click here</a></p>
</div>
<div class="clear"></div>

</div>
</body>
</html>

I hate to sound dense, but which image is it you want to stretch ??

He wants the first thumbnail to change to the second thumbnail when its stretched.

I'm sorry but its not possible. You can make the forms works similar to that but that trapazoid light-brown thing can't yet change in the way that you want.

carter

AAhh.. ok.. you're right, I don't see any way you could do that.