CODEWITHSUNDEEP
javascriptcsshtml
Minimal Code
Minimal Code

Reputation: 43

How to change css background-image on click?

I'd like to change the css "background-image:" when someone clicks a button.

I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?

My current work around is with css and it looks like:

.hello-button {
background-image: url("hello.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
transition: 2s ease-out;
}

.hello-button:hover {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}

Upvotes: 3

Views: 30756

Answers (7)

darcher
darcher

Reputation: 3134

I'd approach it like this. http://jsfiddle.net/darcher/6Ex7h/

jquery

   $('.img').on({
    click: function(){
        $(this).addClass('new-bg').removeClass('bg') // changes background on click
    },
    mousedown: function() {
        // :active state
    },
    mouseup: function() {
        // on click release
    },
    mouseenter: function() {
        // on hover
    },
    mouseleave: function() {
        // hover exit
    }
    /* 
      , hover: function(){
           // or hover instead of enter/leave
        }
    */
})

With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/

html

<div href="#" class="img bg"></div>

css

.img{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    display:block;
    height:200px;
}
.bg{
    background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
    background-image:url(http://placehold.it/300x200/black/white);
}

there are css only alternatives, but they're not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/

Upvotes: 3

DRD
DRD

Reputation: 5813

Here's a CSS-only solution: http://jsfiddle.net/VVj6w/

HTML

<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>

CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

input[type = "checkbox"] {
    display: none;
}

label {
    position: absolute; 
    top: 10px;
    left: 10px;
    background-color: #eee;
    border: 2px solid #ccc;
    padding: 5px;
    border-radius: 10px;
    font-family: Arial, Sans-Serif;
    cursor: pointer;
}

#wrapper {
    background-color: hsla(0, 100%, 50%, 1);
    height: 100%;
    width: 100%;
}

input[type = "checkbox"]:checked ~ #wrapper {
    background-color: hsla(0, 100%, 50%, 0.1);
}

Upvotes: 0

photodow
photodow

Reputation: 255

1. CSS pseudo-class selector:active

If you didn't care about persistence you could always use the the pseudo-class ":active". The image will only be affected as long as your mouse is down. As soon as you mouse-up it'll revert. At this moment, that's about as close as you can get in CSS.

.hello-button:active {
    background-image: url("image.jpg");
}

JSFiddle Example: http://jsfiddle.net/pkrWV/

2. Change Style Attribute with JavaScript

JavaScript is just about the only way you're going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.

You can use JavaScript to change the object's style attribute to update the 'background-image'.

obj.style.backgroundImage = 'url("image.jpg")';

JSFiddle: http://jsfiddle.net/pkrWV/1/

3. Change Class Attribute with JavaScript

Or similarly, you could create two classes in your CSS, and use JavaScript to update the object's class attribute.

/* JavaScript */
obj.className = 'imageOneClassName';

/* CSS */
.imageOneClassName {
    background-image: url("image.jpg");
}

JSFiddle: http://jsfiddle.net/pkrWV/2/

My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It's less JavaScript, more CSS, and you're keeping everything in their appropriate places.

Upvotes: 1

JackW
JackW

Reputation: 999

There's no way to do this in pure HTML/CSS, but in javascript you can do it like so:

var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
    button.style.backgroundImage = "url(bye.png)";
});

You can either include this in a <script></script> tag or add it to a .js file and include that by adding <script src="scriptName.js"></script>

Upvotes: 0

Rich Remer
Rich Remer

Reputation: 2613

If you only want it to change while you are clicking, you should be able to use

.hello-button:active {
    background-image: url("bye.png");
    ...
}

If you want it to remain that way after the click (after the mouse button has been released), you will have to use javascript. Something like the following

document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
    el.classList.add("clicked");
});

Then in the CSS, update your selector to

.hello-button.clicked

Upvotes: -1

MickyScion
MickyScion

Reputation: 516

$(function() {
  $('.home').click(function() {
    $(this).css('background-image', 'url(images/hello.png)');
  });
}):

you have to do like this, there was a relative question see this i hope i helped you...

jquery onclick change css background image

Upvotes: 0

Maiko Trindade
Maiko Trindade

Reputation: 3059

You could use javascript for change the background. The following website javascripter is an example of changing background color and manipulating CSS by Javascript. I hope this can help you.

Upvotes: 1

Related Questions