Cascading two CSS codes with css-sprite

user_15949799 0
Viewed 46

I have an HTML code :

<li class="bath-icon"><a href="bath.php">bath</a></li>

Where class="bath-icon" is defined in CSS as :

.bath-icon a {
    background: url('images/room_bath.png');
    background-size: auto 40%;
    background-repeat: no-repeat;
    background-position: 50% 20px;
    background-color: #7E7C14;
    opacity: 0.8;
}

Now I want to replace background image room_bath.png with an image from a sprite image with values as:

.room_bath {
     width: 107px; 
     height: 64px;
     background: url('images/sprite.png') -0 -952px;
}

Can anyone help me how both CSS can be cascaded and background image from sprite is inserted in .bath-icon class?

sprite cascade class css html
1 Answers

You can create variable in css and refer the variable in your css declaration.

:root {
  --room-bath-bg: url('images/sprite.png') -0 -952px;
}


.bath-icon a {
   background: var(--room-bath-bg);
   background-size: auto 40%;
   background-repeat: no-repeat;
   background-position: 50% 20px;
   background-color: #7E7C14;
   opacity: 0.8;
}

Like above you can create your variable and refer in any places. The variable declaration should start with -- to identify the system.

NOTE: This mehtod is supported by only modern browsers.

Refer this W3 Schools CSS3 Variables to learn more details about this.

user_36070640
Related