How to change background color

CSS isn't changing it

[Lorel]

I'm trying to set up a slideshow and the JS I'm using must have a default of black background and I'd like it to be white but nothing I do changes it. (the images are a lot smaller than the specified total size and I want the excess background to be all white).

Can someone tell me how to fix it (I don't write JS):

here is the JS:

var mygallery=new SomeSlideShow({
wrapperid: "Someshow1", //ID of blank DIV on page to house Slideshow
dimensions: [960, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/hair1.jpg"],
["images/hair2.jpg"],
["images/hair3.jpg"],
["images/hair4.jpg"],
["images/hair5.jpg"],
["images/hair6.jpg"],
["images/hair7.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""

Here is the CSS:

.slideshow { width:960px;
text-align:right;
margin:0 auto 0 auto;
background:#ffffff;
height:225px;
border:4px solid #666666; }

[Hoople]

try

background-color:#ffffff;

[Lorel]

I did that and it didn't change anything.

[Demaestro]

Lorel,

It is likely that the CSS is being overwritten by some CSS that is higher up on the path of acquisition. You can either find the top level CSS def and change that or you can force your CSS def by using !important

If you want to go with the latter do this:

background:#ffffff !important;

[lucy24]

How many different tags use "class = 'slideshow'"? Not how many individuals, how many different ones? If it's always, say, div class = "slideshow", put it that way in the css.

div.slideshow {background-color: white;}

Is the slideshow contained within some other element? Does this in turn have anything like

.wrapper div {background-color: something else}

This can override div.slideshow unless you say explicitly

.wrapper div.slideshow {background-color: white;}

!important is the tag of last resort. It means "I can't figure out which line trumps which, so pleeeeeze just do it this way!"

[Lorel]

I had already checked to make sure the background wasn't coming from elsewhere by removing the body background, which is black, just in case there was a conflict, and the slideshow bg was still black. Nothing else has a black background, so i think it's coming from the slideshow code somewhere. Is it possible it's in the JS file? From what I can see I'm only supposed to edit the first few lines which doesn't contain any css for the background.

I also tried div.slideshow

This is the only slideshow on the site.

The HTML for the slideshow is like this (not contained in any other element other than the container of the whole page which has no bg).

<div class="slideshow">
<div id="someshow1"></div>
</div><!-- end slideshow -->

"someshow1" refers to the JS file.

I also added !important to the slideshow div and the background is still black. I also removed the body bg at the same time and the slideshow is still black.

thanks for trying to help.

[Demaestro]

Lorel,

Inspect the element in FF, Chrome or new IE and look at the CSS for it... it should show you where the background is being set.

Do you see any background-color assignments?

The fact that !important didn't work means either something higher on the path of acquisition has !important as well or; the JS lib that you are using could be using a 1x1px black image and stretches over the background to achieve that look.

If you right click on the black BG do you see things in your menu like "View image" or "view background image"?

[rocknbil]

<div class="slideshow">
<div id="someshow1"></div>
</div><!-- end slideshow -->

then

wrapperid: "Someshow1", //ID of blank DIV on page to house Slideshow

someshow1 and Someshow1 are not the same thing. What's your CSS, if any, for someshow1?

[Lorel]

This is the first time i've ever used !important so it's not elsewhere in the CSS.

Background color is only in the Body tag except where I've used BG transparent. And as stated above the slideshow remains black when I remove BG color from the bogy tag.

If does the same in FF on Safari and FF on the Mac and FF and IE on a PC.

the mismatched names is a result of hiding the real name of the software -- only for this forum.

the slideshow works as expected except for the black background.

[Lorel]

I just checked the JS file and it had 3 places where background: 'black' was listed and once I changed those to white the background turned white.

so it was in the JS file afterall.

[JAB Creations]

I didn't find the property using CTRL+F so I'll just skip everyone's posts and start with...

document.getElementById('element_id').style.backgroundColor = '#f00';

The JavaScript variations of CSS styles are somewhat simple; remove the dashes (e.g. background-color becomes backgroundcolor) and then upper-case all words from the second word onwards (so backgroundcolor becomes backgroundColor). z-index becomes zIndex in another example. I post lists of new methods and properties that become available with each browser release so this is like the back of my hand to me. :)

If you're using multiple values for a property make sure the value is valid CSS, so always keep an eye on your error console. The extension Console² for Firefox has a domain blocker (* block for all and then whitelist your domains) so you can filter out the excessive errors by other sites automatically and concentrate on the errors your code generates.

- John