Help Needed with Adding Image to Header

[swc76801]

I desperately need help. My understanding of CSS is non-existent. I have a store http://astore.amazon.com/texasheat-20 with Amazon.com. According to the information from Amazon.com "Write your own overriding CSS to customize your aStore." Their setup page is divided into two sections. On the right they show the existing CSS. On the left there is a box where you can add the new code. They have tabs for "Global", "Category Page", "Detail Page", "Search Results" etc. The existing code in the "Global" section is:

/* PAGE STYLE */
body {
      margin:24px;
      padding:0px;
      background:#000000;
      color:#FFFFFF;
      min-width:748px;
      font-family:'Lucida Console', monospace;
      font-size:9pt;
      font-weight:500;
      line-height:12pt;
      text-decoration: none;    
}
table {
      font-family:'Lucida Console', monospace;
      font-size:9pt;
}
form {
      margin:0px;
}    
a {
      color: #FFFFFF; 
      text-decoration: underline;
}
a img{ border:none;}
hr {
      border:0;
      width:100%;
      color:#880406;
      background-color:#880406;
      height:1px;
      width:100%;
      margin:6px 0px 12px 0px;
}
#wrap {
      width:748px;
}
#rule {
      height:1px;
      background-color:#FFFFFF;
      width:100%;
      margin:6px 0px 12px 0px;
}
h2 {
      font-size:16px;
      font-weight:bold;
      margin:0px;
      padding:0px;
}
h3 {
      font-size:14px;
      font-weight:bold;
      margin:0px;
      padding:0px;
}
 
/* MAIN PAGE AREA */    
#mainwrap {
      float:left;
}
#main {
      width:530px;
      margin-bottom:19px;
      overflow:hidden;
}
div#header {
      background:#880406;
      padding:6px 24px 4px;
      margin:0;
      vertical-align:middle;
}
a#mainheadertitle {
      padding:0px;
      font-family:'Georgia', serif;
      font-size:15pt;
      font-weight:normal;
      line-height:28pt;
      color:#FFFFFF; 
      margin:0px;
      text-align:left;
      vertical-align:middle;
      text-decoration:none;
}
a#mainheadertitle:hover {
      text-decoration:underline;
}
td#mainheaderlogo {
      padding:5px;
}
img#mainlogo {
      padding-right:5px;
}
div#mainsubheader {
      background:#303030;
      padding:10px 24px;
      vertical-align:middle;
}
div#contentsubheader {
      width:482px;
      overflow:hidden;
}
div#subheaderlinks {
      float:right;
      text-align:right;
}
div#subheadertitle {
      font-size:12pt;
      font-weight:bold;
}
div#contenterror {
      background:#333333;
      padding:14px 24px;      
}
span.currentpage {
      font-weight:bold;
}
 
span.error {
      font-weight:bold;
}
 
/* SIDEBAR */
#sidebar {
      float:right;
      width:200px;
      overflow:hidden;
}
#sidebar ul {
      margin-bottom:0;
}
#sidebar h3, #sidebar p {
      padding:0 10px;
}
 
/* GENERAL SIDEBAR WIDGET STYLES */
ul#widget,ul.widget li.widget {
      margin:0;
      padding:0;
      list-style:none;
}
li.widget {
      float:left;
      width:200px;
      margin-bottom:19px;
}
ul#widget div {
      background:#333333;
}
ul#widget h3 {
      font-family:'Lucida Console', monospace;
      font-size: 10pt;
      font-weight: bold;
      color:#FFFFFF;
      margin:0px;
      padding:6px 15px 4px;
      text-align:left;
      background:#880406;
}
ul#widget p {
      font-family:'Lucida Console', monospace;
      font-size: 9pt;
      font-weight: normal;
      color:#FFFFFF;
      margin:0px;
      padding: 10px 15px 20px;
}
 
/* SEARCHBROWSE WIDGET */
div#searchbrowse {
      padding:14px;
}
div#searchbrowse div.indent {
      padding: 5px 0px 5px 15px;
}
select.searchwidget {
      width:173px;
      margin-bottom:6px;
}
input#searchwidgetkeywords {
      width:134px;
}
span#SearchAtAmazon {
      font-size: 8pt;
}
div#browsetitle {
      font-weight:bold;
      padding-bottom:7px;
}
span.selectedcategory {
      font-weight:bold;
}
 
/* LISTMANIA WIDGET */
div.listwidget {
      padding-bottom:16px;
}
ul.listmania {
      margin:0px;
      padding:0px;
      list-style:none;
}
ul.listmania li {
      margin:0px;
      padding:5px;
      padding-left:10px;
      list-style:none;
      text-align:center;
}
ul.listmania li.clsOdd,li.listimages {
      background-color:#353535;
}
ul.listmania li.clsEven {
      background-color:#333333;
}
 
img.listimage {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
 
/* PRODUCTS WIDGETS */
div.productwidget {
      padding:0px;
      padding-bottom:16px;
}
div.productwidget .price {
      font-weight:bold;
}
table.sidebarproducts {
      font-family:'Lucida Console', monospace;
      font-size:9pt; 
      width:200px;
}
table.sidebarproducts td {
      padding:5px;
}
table.sidebarproducts td.image {
      vertical-align:top;
      width:75px;
}
table.sidebarproducts td.text {
      vertical-align:middle;
      width:115px;
}
table.sidebarproducts span.listtitle {
      font-weight:bold;
}
div.privacylink {
      padding: 2px 5px;
      font-size:7pt;
      text-align:center;
}
 
/* FOOTER */
div#footer {
      width:530px;
      margin-bottom:28px;
      color:#880406;
      border-top:1px solid #880406; 
}
div#footer p {
      padding:5px;
      margin:0;
}
div#leftfoot {
      float:left;
      width:430px;
}
div#rightfoot {
      float:right;
      width:100px;
      text-align:right;
}
 
/*Associate Provided CSS*/
#wrap {
      margin: 0px auto;
      padding-top: 187px;
      background: url(http://TexasHeat.US/wordpress/wp-content/themes/Texas-Heat/images/header.jpg) no-repeat;
}
 
body {
      text-align:center;
}

I've added the following:

#wrap {
      margin: 0px auto;
      padding-top: 187px;
      background: url(http://TexasHeat.US/wordpress/wp-content/themes/Texas-Heat/images/header.jpg) no-repeat;
}
 
body {
      text-align:center;
}

This added the image as I wanted but there are problems I can't resolve. When I set width:748px; the lower portion of the page is perfect, but my image is cropped. If I set width:959px; (the width of the image) the image is perfect but the text is now spread out across the page. My ultimate goal is to have the image (which is obviously wider than the text) centered above the text and spanning it on the left and the right. The "text-align:center;" also centers the text on the "Detail Page" which tells me I'm probably using an incorrect procedure to senter the page or I'm omitting something.

Thanks in advance for your time and attention!

Steve

[lzellner]

Hello,

I believe this will fix Your Problem [ Be sure to change (header.gif) to your image )


ADD THIS TO CSS



<h1 id="album">My photo album</h1>
#album {
width: 300px; height: 75px;
background-image: url(header.gif);
background-repeat: no-repeat;
}



ADD THIS TO HTML WHERE YOU WANT THE HEADER


<h1 id="album"><span></span>My photo album</h1>




lzellner