1 reply [Last post]
jmarc4312
Offline
newbie
Boston
Last seen: 7 years 27 weeks ago
Boston
Timezone: GMT-4
Joined: 2014-03-16
Posts: 1
Points: 2

Having trouble centering my div content on an ebay page description. I would like to make my background image size to be 75% and center all the content within that background image. My content is set to be 750px wide

Currently content is only centered within background when I set the background to 100% width. Check out the site here: http://www.ebay.com/itm/390788760046?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649

Working on my code now and here I have the background set at 75% but the div contents are aligning to the left not center.

This site is also not letting me paste my code. In an effort to make it easy for users to paste code with the control K option this site created a roadblock for me. When I pasted it site states I pasted code and wont let me continue.

here is my code so far:

<style type="text/css">
#SuperBG {
width:100%;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/BG.jpg');
background-position: top center;
}
#SuperWrapper {
width: 750px;
margin-left: auto 0;
margin-right: auto 0;
font-family: arial, Helvet ica, sans-serif;
font-size: 12px;
color: #000000;
}
#SuperWrapper p {
margin: 0px;
padding: 0px 0px 15px 0px;
line-height: 20px;
}
#SuperWrapper h1 {
padding: 0px 0px 10px 0px;
margin: auto;
font-size: 30px;
font-weight: bold;
letter-spacing: -2px;
color: #000000;
}
#SuperWrapper a {
font-weight: bold;
text-decoration: underline;
color: #000000;
}
#SuperWrapper a:hover {
text-decoration:none;
}
#SuperHeader {
width: 750px;
height: 318px;
background-image: url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/Header.jpg');
}
#SuperHeaderLogo {
padding: 107px 0px 0px 0px;
font-family: impact;
font-size: 30px;
letter-spacing: -1px;
font-weight: normal;
margin: 0px;
float: center;
text-align: center;
line-height: 50px;
color: #;
text-shadow: -2px -3px -3px #000;
}
#SuperHeaderMenu {
margin: 0px;
}
#SuperHeaderMenu ul.navi{
padding: 0px;
margin: 0px 0px 0px 0px;
width: 750px;
text-align: center;
position: relative;
}
#SuperHeaderMenu ul.navi li{
height: 22px;
padding: 0 10px 0 10px;
margin: 0px;
display: inline;
}
#SuperHeaderMenu ul.navi li a{
padding: 0px 8px 0px 8px;
font: 18px arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
text-indent: 0px;
font-weight: bold;
margin: 0;
width: inherit;
letter-spacing: -1px;
line-height: 30px;
}
#SuperHeaderMenu ul.navi li a:hover{
color: #FFFF99;
}
#SuperContentsWrapper {
width: 750px;
background-image: url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/Contents.jpg');
}
#SuperContents {
width: 750px;
font: arial;
font-size: 17px;
background-image: url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/Contents.jpg');
background-repeat: no-repeat;
}
#SuperContentsSub {
padding: 0px 40px 0px 40px;
}
#SuperFooter {
width: 750px;
height: 44px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/Footer.jpg');
}
#SuperFooterLink {
width: 750px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/BG.jpg');
height: 100px;
}
#SuperBoxContents {
padding: 0px 80px 0px 80px;
margin: 0px;
color: #000000;
}
#SuperBoxContents p {
padding: 0px 0px 10px 0px;
margin: 0px;
line-height: 20px;
}
#SuperBoxContents a {
color: #000000;
text-decoration: underline;
}
#SuperBoxContents a:hover {
text-decoration:none;
}
#SuperBoxContents ul {
padding: 0px 0px 0px 28px;
margin: 0px;
list-style-type: disc;
}
#SuperBoxContents li {
line-height: 20px;
}
#SuperPayment {
width: 750px;
 
}
#SuperPaymentTop {
width: 750px;
height: 83px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/PaymentPolicyTop.jpg');
}
#SuperPaymentContents {
width: 750px;
font: arial;
font-size: 15px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/PaymentPolicyContents.jpg');
}
#SuperPaymentBottom {
width: 750px;
height: 53px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/PaymentPolicyBottom.jpg');
}
#SuperShipping {
width: 750px;
}
#SuperShippingTop {
width: 750px;
height: 83px;
background-image: url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/ShippingPolicyTop.jpg');
}
#SuperShippingContents {
width: 750px;
font: arial;
font-size: 15px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/ShippingPolicyContents.jpg');
}
#SuperShippingBottom {
width: 750px;
height: 53px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/ShippingPolicyBottom.jpg');
}
#SuperContacts {
width: 750px;
}
#SuperContactsTop {
width: 750px;
height: 83px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/ContactsTop.jpg');
}
#SuperContactsContents {
width: 750px;
font: arial;
font-size: 15px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/ContactsContents.jpg');
}
#SuperContactsBottom {
width: 750px;
height: 53px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/ContactsBottom.jpg');
}
#SuperReturns {
width: 750px;
}
#SuperReturnsTop {
width: 750px;
height: 83px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/ReturnsTop.jpg');
}
#SuperReturnsContents {
width: 750px;
font: arial;
font-size: 15px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/ReturnsContents.jpg');
}
#SuperReturnsBottom {
width: 750px;
height: 53px;
background-image:url('http://www.superauctiontemplate.com/freebaytemplate/productimages/GeneralShopping16/HTML/images/ReturnsBottom.jpg');
}
/* HTML5 ELEMENTS */
/* sub images > thumbnail list */
ul#SuperThumbs, ul#SuperThumbs li {
margin: 0;
padding: 0;
list-style: none;
}
ul#SuperThumbs li {
float: left;
background: #ffffff;
border: 1px solid #cccccc;
margin: 0px 0px 10px 10px;
padding: 8px;
-moz-border-radius: 10px;
border-radius: 10px;
}
ul#SuperThumbs a {
float: left;
display: block;
width: 138px;
height: 138px;
line-height: 100px;
overflow: hidden;
position: relative;
z-index: 1;
}
ul#SuperThumbs a img {
float: left;
width: 100%;
height: 100%;
border: 0px;
}
/* sub images > mouse over */
ul#SuperThumbs a:hover {
overflow: visible;
z-index: 1000;
border: none;
}
ul#SuperThumbs a:hover img {
background: #ffffff;
border: 1px solid #cccccc;
padding: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
    position: absolute;
    top:-20px;
    left:-50px;
    width: auto;
    height: auto; 
}
/* sub images > clearing floats */
ul#SuperThumbs:after, li#SuperThumbs:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul#SuperThumbs, li#SuperThumbs {
display: block;
}
ul#SuperThumbs, li#SuperThumbs {
min-height: 1%;
}
* html ul#SuperThumbs, * html li#SuperThumbs {
height: 1%;
}
</style>
<div id="SuperBG">
<div id="SuperWrapper">
<div id="SuperHeader" style="width: 750px; height: 318px">
<div id="SuperHeaderLogo"><font color="#BFBFBF">Battery Kit: Suunto Observer, X6, X6HR and G6 Watch</font></div>
<div id="SuperHeaderMenu">
 
</div>
</div>
<div id="SuperContentsWrapper">
<div id="SuperContents">
<div id="SuperContentsSub">
<h1 align="center">New replacement battery kit for <br>
Suunto Observer, X6, X6HR&nbsp;
and G6</h1>
 
<p align="center">
<img src="http://s26.postimg.org/ba5uv1jqh/unnamed_1.jpg" border="1"><br>
&nbsp;</p>
<p><u>Kit includes:</u> Brand new factory approved battery and&nbsp;
o-ring for the Suunto Observer, X6, X6HR and G6 wrist-top&nbsp;
computers. <br>
<br>
All kits must meet your satisfaction or your money back!</p>
<p>&nbsp;</p>
<p></p>
<p></p> 
</div>
<div id="SuperPayment">
<div id="SuperPaymentTop"></div>
<div id="SuperPaymentContents">
<div id="SuperBoxContents">
Paypal is our preferred form of payment&nbsp;
which you can use through eBay's own easy built in&nbsp;
system!<br>
<br>
You will&nbsp;automatically&nbsp;be directed to eBay's checkout&nbsp;
system after you click "Buy it Now"<font size="2"><br>
&nbsp;</font></div>
</div>
<div id="SuperPaymentBottom"></div>
</div>
 
<div id="SuperShipping">
<div id="SuperShippingTop"></div>
<div id="SuperShippingContents">
<div id="SuperBoxContents">
<font size="2">We ship your item within 24-48 hours of&nbsp;
your payment.&nbsp;<br>
<br>
We ship using the US Postal Service on business days&nbsp;
Monday thru Fridays.</font><br>
&nbsp;</div>
</div>
<div id="SuperShippingBottom"></div>
</div>
<div id="SuperContacts">
<div id="SuperContactsTop"></div>
<div id="SuperContactsContents">
<div id="SuperBoxContents">
<font size="2">We offer hassle-free returns. If you are&nbsp;
not satisfied with your item for any reason return it&nbsp;
within&nbsp;14 days of receipt for your money back. </font></div>
</div>
<div id="SuperContactsBottom"></div>
</div>
 
<div id="SuperReturns">
<div id="SuperReturnsTop"></div>
<div id="SuperReturnsContents">
<div id="SuperBoxContents">
<p align="center">
<font size="2">Any questions or do you want to get in&nbsp;
touch with us?&nbsp;&nbsp;<br>
&nbsp;<br>
Please use the ask a question option in this listing to&nbsp;
send us a message! We would be glad to help.&nbsp;<br>
<br>
</font>
<font size="3"><b>Thanks for looking</b></font><font size="2"><br>
&nbsp;</font></p></div>
</div>
<div id="SuperReturnsBottom"></div>
</div> 
 
</div>
</div>
<p></p>
 
</div>
</div>

I want to make the background only take up 50-75%, have that centered on the page and also have all the div centered within that.

Please advise

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Instead of

Instead of background-position: top center;

Try to change it to:
background-position: center;

Check Maximum Webdesign for your online solutions