Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy HTML/CSS Slider Transparent Background. Help Please

    Before you open up my website, I would like to warn that there is music that automatically plays, so you might want to turn your volume down.

    http://thebazingareview.blogspot.com/

    1. Go to my site
    2. Click view page source
    3. CTR F: "slider"
    4. Look at the slider CSS code.

    If your too lazy to do this I will also provide the code at the bottom.

    My problem: Notice how when the images go up and down the background for the box is white. I would like to make the background for this transparent. I have tried putting the Opacity to .5, however, when I do this, it changes the opacity for the images, the background, and the slider word thingy. Is there a way that I can make just the background transparent? So that you cannot see through the words or the pictures, but when they go up you can still see the background? thanks.

    #s3slider {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 3px double #CCCCCC;
    height: 300px;
    margin-bottom: 25px;
    margin-top: 0px;
    overflow: hidden;
    position: relative;
    text-shadow: 0 1px 0 #000000;
    width: 800px;
    margin: auto;
    }
    #s3sliderContent {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 300px;
    list-style: none outside none;
    margin-left: 0;
    padding: 0;
    position: absolute;
    top: -500px
    width: 800px;
    }
    .s3sliderImage {
    float: left;
    position: relative;
    width: 600px;
    }
    .s3sliderImage span {
    background-color: #000000;
    color: #FFFFFF;
    display: none;
    font-size: 12px;
    height: 300px;
    line-height: 16px;
    opacity: 0.7;
    overflow: hidden;
    padding: 10px 13px;
    position: absolute;
    right: ;
    left: 600px;
    top: 0;
    width: 175px;
    }
    .s3sliderImage strong a {
    color: #FFFFFF;
    font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
    font-size: 20px;
    }
    .s3sliderImage strong a:hover {
    color: #FFFFFF;
    }

  • #2
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    I think this is what you want:
    Code:
    background-color: transparent
    Thanks for warning re: music, but you should consider that your regular visitors are not getting a warning... and instead of turning the volume down, will possibly just close your site.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •