REALLY UTTERLY SIMPLE - but stuck

Discussion in 'CSS' started by Hugh456, Jan 12, 2009.

0
  1. #1
    Hi,

    All I would like to be able to do is have the following:
    1) A webpage with a tiled .gif background.
    2) A drop down menu with a list of other backgrounds.
    3) Changing background when an option is selected from that list

    Surely this is the easiest thing ever???

    Here's what I've managed so far...

    I've set the background in CSS in between the <head> tags

    <style type="text/css"><!-- body { background: url(/images/Backgrounds/first.gif) 50% 50% repeat;} --></style>

    This tiles the background nicely - looks perfect.
    Great

    Next I have a drop down menu in the body..

    <select onchange="if(this.value!='') document.body.style.backgroundImage='url(this.value)'">
    <option value="">Choose your colours...</option>
    <option value="/images/Backgrounds/second.gif">Try this</option>
    <option value="/images/Backgrounds/third.gif">or this</option>
    </select>

    Fantastic - I have a drop down menu with my options.

    BUT - and this is the bit I need help with - why don't the new backgrounds load into the page?

    Are there any geniuses out there tonight?
     
    Hugh456, Jan 12, 2009 IP
  2. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #2
    Are you getting any errors or warnings?

    I'm not exactly sure if browsers allow you to modify the body once it has been created.

    Maybe try a <div> thats 100% x 100% ? Probably not the best way to do it :p
     
    crath, Jan 12, 2009 IP
  3. Hugh456

    Hugh456 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I just figured it out - it was simple!

    <select onchange="document.body.style.backgroundImage = 'url(' + this.options[this.selectedIndex].value + ')';">
     
    Hugh456, Jan 12, 2009 IP