Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to: get a black background on ebay
New Posts  All Forums:Forum Nav:

How to: get a black background on ebay

post #1 of 16
Thread Starter 
I want a black background like this on my ebay template..
http://cgi.ebay.com/ws/eBayISAPI.dll...MEWA:IT&ih=019

what's the code to have that black background, or is the whoe background an image, i also want that picture effect if anyone knows how to do it


American Gangster was a gret movie, it's now on my top 10 , Denzel has my vote for Best Actor
post #2 of 16
I forget if ebay allows raw html..

If you can edit HTML, try this
Code:

<style>
#container
{
color: #FFFFFF;
background-color: #000000;
width: 100%;
height: 100%;
}
</style>
<div id="container">
<!-- YOUR CONTENT HERE -->
</div>
post #3 of 16
As far as the image effect, looking at the html he does it using a series of images and padding/positioning.

http://www.iwascoding.de/GarageSale/...otlight_03.jpg
http://www.iwascoding.de/GarageSale/...otlight_01.jpg
http://www.iwascoding.de/GarageSale/...otlight_02.jpg

More complex then using just one image made in photoshop hehe. I assume though this was done using some kind of template from somewhere.

If you wanted to use his exact code it is below. I hope you know some html/css to make this flow in your layout.

Code:
<div style="margin: 0pt auto; padding: 11px 0pt; width: 800px;">
<div style="background: rgb(0, 0, 0) url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_02.jpg) repeat-y scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div style="background: transparent url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_01.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div style="padding: 118px 201px 120px; background: transparent url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_03.jpg) no-repeat scroll left bottom; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><div style="width: 1px; height: 100px; line-height: 1px;"><small></small></div></td>
<td>
<img src="YOUR PIC URL HERE" border="0" width="312">
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
EDIT: I just noticed that the div style have mozilla specific styles where as ie source didn't so the styles are probably generated by a script based on the browser. The code above should still work though on most modern browsers I think.
post #4 of 16
Thread Starter 
Quote:
Originally Posted by LyokoHaCk View Post
I forget if ebay allows raw html..

If you can edit HTML, try this
Code:

<style>

#container
{
color: #FFFFFF;
background-color: #000000;
width: 100%;
height: 100%;
}
</style>
<div id="container">
<!-- YOUR CONTENT HERE -->
</div>
it worked sort of, but i only want the black background to appear outside my middle content section, and not on the inside also, to give u a clearer image of what i'm talking about, here is one of my listings using my ebay template..
http://cgi.ebay.com/ws/eBayISAPI.dll...MESE:IT&ih=011

that code worked to give a black background on everything, but i only want it around the outside
post #5 of 16
Thread Starter 
Quote:
Originally Posted by Polska View Post
As far as the image effect, looking at the html he does it using a series of images and padding/positioning.

http://www.iwascoding.de/GarageSale/...otlight_03.jpg
http://www.iwascoding.de/GarageSale/...otlight_01.jpg
http://www.iwascoding.de/GarageSale/...otlight_02.jpg

More complex then using just one image made in photoshop hehe. I assume though this was done using some kind of template from somewhere.

If you wanted to use his exact code it is below. I hope you know some html/css to make this flow in your layout.

Code:
<div style="margin: 0pt auto; padding: 11px 0pt; width: 800px;">
<div style="background: rgb(0, 0, 0) url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_02.jpg) repeat-y scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div style="background: transparent url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_01.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div style="padding: 118px 201px 120px; background: transparent url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_03.jpg) no-repeat scroll left bottom; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><div style="width: 1px; height: 100px; line-height: 1px;"><small></small></div></td>
<td>
<img src="YOUR PIC URL HERE" border="0" width="312">
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
EDIT: I just noticed that the div style have mozilla specific styles where as ie source didn't so the styles are probably generated by a script based on the browser. The code above should still work though on most modern browsers I think.
wow, thanks, it did work, but now what codes represent that white background, i want to change the size and shape of it
post #6 of 16
I'm not sure if you can change the width of this layout. It's done so that it resizes your image width (it scales vertically) to fit in the layout. If you resized the pics used for the background and toyed with the width of your image container maybe you could get it to scale to the width you want

If you have photoshop, or gimp, or some other good photo editing software you could make the same effect on your image using the picture links I gave you above. If you want to link me the photo I could quickly whip you up a gif or jpg with that effect.
post #7 of 16
Thread Starter 
Quote:
Originally Posted by Polska View Post
I'm not sure if you can change the width of this layout. It's done so that it resizes your image width (it scales vertically) to fit in the layout. If you resized the pics used for the background and toyed with the width of your image container maybe you could get it to scale to the width you want

If you have photoshop, or gimp, or some other good photo editing software you could make the same effect on your image using the picture links I gave you above. If you want to link me the photo I could quickly whip you up a gif or jpg with that effect.
oh, i wasnt talking about 1 particular pic, i wanted to make that white background image a little wider, im going to have different pics sizes and shapes and jus wanted to have a background that will be big enough to accomodate all pics, thanks anyway
post #8 of 16
Thread Starter 
Quote:
Originally Posted by Polska View Post
Code:
<div style="margin: 0pt auto; padding: 11px 0pt; width: 800px;">
<div style="background: rgb(0, 0, 0) url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_02.jpg) repeat-y scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div style="background: transparent url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_01.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div style="padding: 118px 201px 120px; background: transparent url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_03.jpg) no-repeat scroll left bottom; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><div style="width: 1px; height: 100px; line-height: 1px;"><small></small></div></td>
<td>
<img src="YOUR PIC URL HERE" border="0" width="312">
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
i changed the "width:" to "760px" from "800px", the white background shifted to the right a little, what code do i need to change to accomodate that 760px change and have it centered again
post #9 of 16
If you add 40px padding to left of the td tag enclosing the pic it seems to do the trick. I don't guarantee this code will work in every browser hehe, seems kind of flaky to me, but at least works in ie6 and newest versions of firefox/netscape/opera so its ok I guess hah.
Code:
<div style="margin: 0pt auto; padding: 11px 0pt; width: 760px;">
<div style="background: rgb(0, 0, 0) url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_02.jpg) repeat-y scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div style="background: transparent url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_01.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div style="padding: 118px 201px 120px; background: transparent url(http://www.iwascoding.de/GarageSale/DesignTemplates/Spotlight/v1/Spotlight_03.jpg) no-repeat scroll left bottom; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<table align="center" border="0" cellpadding="0" cellspacing="0" >
<tbody><tr>
<td><div style="width: 1px; height: 100px; line-height: 1px;"><small></small></div></td>
<td style="padding-left:40px">
<img src="YOUR PICTURE LINK HERE" border="0" width="312">
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
post #10 of 16
Quote:
it worked sort of, but i only want the black background to appear outside my middle content section, and not on the inside also, to give u a clearer image of what i'm talking about, here is one of my listings using my ebay template..
http://cgi.ebay.com/ws/eBayISAPI.dll...MESE:IT&ih=011

that code worked to give a black background on everything, but i only want it around the outside
Tags inside a container will inherit that containers background color unless you specify a color for that tag.

So if we use the other posters code as an example, if you have a table (or div, or other tag) inside "container", you can give that container a different color and I think that is the effect you are after.

Code:
<style>
#container
{
color: #FFFFFF; 
background-color: #000000;
width: 100%;
height: 100%;
}
</style>
<div id="container">
<!-- YOUR CONTENT HERE -->
  <div id="internalcontainer" style="background-color:#ff0000">
     Hi, my background is different then my parents
  </div>
</div>
So "container" will have a black background and "internalcontainer" will have a red background in this case (use #ffffff for a white color).

You will have to find the container (most likely a table) of which you want to change the background of and add "background-color:#ff0000;" to its style attribute or to its identifier in the css stylesheet.

if you know the id of the element whose background you want to change you can change it in the stylesheet. I am not sure how your code is structured, but to do the above in the style sheet would look like this.

Code:
<style>
#container
{
color: #FFFFFF; 
background-color: #000000;
width: 100%;
height: 100%;
}
#internalcontainer
{
background-color: #ff0000;
}
</style>
<div id="container">
<!-- YOUR CONTENT HERE -->
  <div id="internalcontainer">
     Hi, my background is different then my parents
  </div>
</div>
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to: get a black background on ebay