CODEWITHSUNDEEP
htmlcss
Kieran Rippy Thompson
Kieran Rippy Thompson

Reputation: 49

Setting a background image with a button in HTML/CSS

I want to set a background image to a webpage by clicking a button, mine isn't working, can anyone help?

Code-snippet: 

body input {
  background-color: #2c4c4c;
}
body input:active {
  width: 100%;
  height: 100%;
  background-image: url(meme.jpg) no-repeat;
}
<html>

<head>
  <link rel="stylesheet" href="styesheet.css" type="text/css">
</head>

<body>

  <div id="container">
    <form>
      <input type="button" value="click me">
    </form>
    <!-- closing container div -->

  </div>
</body>

</html>

Upvotes: 1

Views: 6512

Answers (3)

Zeev Katz
Zeev Katz

Reputation: 2273

You can do that without JavaScript!

Im found for a simple way to do that without any Js and you can change the triggering with html and css only. We need to change some html tags and simplest css code. The idea its to make our "body" container => (#container) and change him with background image.

For example:

/* Making a fake body */
#container {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Hide the helper */
#helper {
  display: none;
}

/* On helper:active ~ change the next element (#container) */
#helper:active ~ #container{
  background: url(http://www.hutui6.com/data/out/207/68338774-view-wallpapers.jpg) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
}

input {
  background: #2c4c4c;
}
<body>
  <!-- helper -->
  <input id="helper" type="button">
  <!-- fake "body" container -->
  <div id="container">
        <form>
        <!-- trigger the helper -->
          <label for="helper">
            <input type="button" value="click me">
          </label>
        </form>
  </div>
</body>

And one more option:

/* Making a fake body */
#container {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Hide the helper */
#helper {
  display: none;
}

/* On helper:checked ~ change the next element (#container) */
#helper:checked ~ #container{
  background: url(http://www.hutui6.com/data/out/207/68338774-view-wallpapers.jpg) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
}

input {
  background: #2c4c4c;
}
<body>
  <!-- helper -->
  <input id="helper" type="checkbox">
  <!-- fake "body" container -->
  <div id="container">
        <form>
        <!-- trigger the helper -->
          <label for="helper">
            <input type="button" value="click me">
          </label>
        </form>
  </div>
</body>

And my Fiddle

Upvotes: 0

ppajer
ppajer

Reputation: 3145

You can't do that without JavaScript

Unfortunately CSS styles can only be applied to the selected elements and their children, neighbors, and siblings. Since the body is a parent of your button, setting styles on the button itself has no effect on it. You have to give your button an event handler that sets the background of the body tag. The easiest way to do it would be

<button onclick="changeBackground();">Click me</button>

Then create the function that will handle the click

<script type="text/javascript">

    function changeBackground() {
        document.body.style.background = 'url(meme.jpg) no-repeat';
    }

</script>

Of course this is just the tip of the iceberg if you've yet to use JavaScript, there's a lot of material about it on the web.

Upvotes: 4

connexo
connexo

Reputation: 56754

<input type="button" value="click me" onclick="document.body.style.backgroundImage='meme.jpg'" >

Upvotes: 0

Related Questions