Is it possible to change background image of page by click on button using only CSS? I have 6 buttons, and I want to change background image of whole page to be changed on button click.
Is it possible with only css? If yes, then how?
That would be nice, but no.
You don't need that hard a function, though. Simply attach the background change with the rest of the functionality of the button. I recommend in this case that you just add the background image as css inline with your js, because 6 classes of images can go wrong easy.
This is perfectly easily possible using only CSS and HTML.
http://codepen.io/anon/pen/KpmPYO
input[name="bg-change-control"] {
display: none;
}
body {
margin: 0;
}
#page {
background: url(http://lorempixel.com/1000/700) no-repeat 0 0;
background-size: cover;
height: 100vh;
}
label {
-moz-appearance: button;
-webkit-appearance: button;
}
#cb1:checked ~ #page{
background-image: url(http://lorempixel.com/800/600);
}
#cb2:checked ~ #page{
background-image: url(http://lorempixel.com/640/480);
}
#cb3:checked ~ #page{
background-image: url(http://lorempixel.com/1024/768);
}<input type="radio" name="bg-change-control" id="cb1" />
<input type="radio" name="bg-change-control" id="cb2" />
<input type="radio" name="bg-change-control" id="cb3" />
<div id="page">
<label for="cb1">BG 1</label>
<label for="cb2">BG 2</label>
<label for="cb3">BG 3</label>
</div></div>
This is possible with pure CSS and HTML. No need to use Javascript and Jquery.
Try this
HTML:
<input type="button" value="Click" class="click">
<div class="background1"></div>
CSS:
.background1 {
background: url("http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg") no-repeat; width:500px; height:500px
}
.click:focus ~ .background1 {
background: url("http://i.dailymail.co.uk/i/pix/2015/01/06/2473100D00000578-2898639-Photographer_Andrey_Gudkov_snapped_the_images_on_the_plains_of_t-a-20_1420546215677.jpg") no-repeat; width:500px; height:500px
}
Hope it will fullfil your requirement.