CODEWITHSUNDEEP
csshtml
Janath
Janath

Reputation: 1248

Change background color and background image

I want to change my div background color and image on hover. Just like this.

enter image description here

I tried with this way. But it changed only background color. Is there any way to achieve this kind of situation? 

<div class="col-md-4">
  <div class="icon-wrapper"></div>
     <p>Products</p>
</div>

.icon-wrapper {
    background: url("/assets/human-resources.png");
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    height: 120px;
    position: relative;
    width: 120px;
    border-radius: 50%;
    transition: all 0.2s;

    img {
        top: 22%;
        left: 24%;
        position: absolute;
    }

    &:hover {
        background: blue;
        background-position: center;
        background-repeat: no-repeat;
        background: url("/assets/car-white.png");
    }
}

Upvotes: 1

Views: 6044

Answers (5)

pradip kor
pradip kor

Reputation: 459

Example 1 : Table row background color change

<table>
    <tr  bgcolor="#777777">
        <td>Content Write here...</td>
    </tr>
</table>

Example 2 : If change background image then use this code

<div style="background-image: url('bg.jpg');"></div>

Upvotes: 1

Rani Moreles Rubillos
Rani Moreles Rubillos

Reputation: 1108

background-color: #6DB3F2;
background-image: url('images/checked.png');

you could try to use this instead 

background: #6DB3F2 url('images/checked.png');

Upvotes: 6

ghosthunter
ghosthunter

Reputation: 303

I don't know all layout of your website but I can tell you a short introduction to popups - how to create them in right way.

At first, outside all other div blocks create another one for background mask (between last div block element in html and closing body tag) - it will be used only as background layer (with absolute position), style as you wish and set display none to hide it.

Then create another div block for popup (not inside background block but under it, position fixed to scroll with your page), create popup and style how you want, hide it as well (display none).

This will give you reusable popup structure that you will be able to use how many times you need afterwards just adding new popup block under first one etc.

I know it is just a theory without real life examples, so you can study a bit here (about structure, jQuery can be used in more easy way):

Reusable modal popups

P.S. Answer to your question:

You need to change background-color and background-image (on hover state). :)

Upvotes: 3

Tom
Tom

Reputation: 337

In my understanding you are trying to change the background image and the background color on hover, right? Try this:

yourElement:hover{
   background-color: yellow;
   background-image: url(../images/bg.gif);
}

Upvotes: 1

Tolga Kısaoğulları
Tolga Kısaoğulları

Reputation: 638

Because you are overriding background on hover selector thats normal situation. Try background-color:blue; on hover selector

Upvotes: 0

Related Questions