Home/ Questions/Q 8600197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T01:33:48+00:00

I am attempting to create a function where by a button is clicked and

  • 0

I am attempting to create a function where by a button is clicked and the background image is selected for a div. Here is what I have started below but it does not seem to work can anyone point out where Im going wrong… 🙂

<style type="text/css">
#txt{
    width: auto;
    height: auto;
    border: solid #000;
    }
</style>

<script type="text/javascript">

    function backg1(){
        var test = new string ();
        test = document.getElementById('txt');
        test.style.backgroundImage="url('cloud.jpg')";
    }

</script>
</head>

<body>
<div id="txt">
<input type="button" value="BG1" onclick="backg1()"/>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since your <div> originally contains nothing but the button input, it has no size outside the boundaries of that button. You will need to set an explicit width and height (along with position: relative) to see the background.

    I would recommend setting them to the same dimensions as your image.

    /* in the CSS */
#txt{
    /* use the width, height of your image */
    width: 400px;
    height: 250px;
    position: relative;
    border: solid #000;
}

    Or if you need to set them dynamically:

    function backg1() {
    test = document.getElementById('txt');
    test.style.backgroundImage="url('cloud.jpg')";

    // <div>  needs a width & height for the background image to be visible outside the 
    // bounds of the one element contained in the div.
    test.style.width = "400px";
    test.style.height = "250px";
    test.style.position = "relative";
}
    • 0