Search code examples
csscss-sprites

CSS image Sprite not working in the stylesheet, while working as an inline code

I don't know why CSS image sprite is not working as a separate CSS file but it's working an inline code!

What's the problem? I've recorded/attached a video as well. Video => https://gofile.io/?c=ITICxx

It's very strange to me and till now I couldn't find a solution. I have this problem in all browser (Chrome, Opera, Firefox)

.dfeature-box {
text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}

.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;

background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.sprite-bg{

background: url("https://i.imgur.com/VO1dBBA.jpg");

}
.bg-1{
    width:62px;
    height:62px;
    background-position: 0px 61px;
}
.bg-2{
    width: 64px;
    height: 62px;
    background-position: 62px 61px;
}
.bg-3{
    width: 64px;
    height: 62px;
    background-position: 127px;
}

.dfeature-box .icon i {
    font-size: 50px;
    background: -webkit-linear-gradient(to bottom, #45b35e, #6ad56a);
    background: linear-gradient(to bottom, #45b35e, #6ad56a);
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hustbee</title>

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

</head>
	<body>
			<div class="dfeature-box">
                    <div class="icon"><div class="sprite-bg bg-1"></div></div>
                    <div class="title">TITLE</div>
                    <div class="details">long description.</div>
                </div>


                <div class="dfeature-box">
                    <div class="icon"><div class="sprite-bg bg-2"></div></div>
                    <div class="title">TITLE</div>
                    <div class="details">long description.</div>
                </div>

                <div class="dfeature-box">
                    <div class="icon"><div class="sprite-bg bg-3"></div></div>
                    <div class="title">TITLE</div>
                    <div class="details">long description.</div>
                </div>

	</body>
</html>

Solution

  • My Dear Friend its working, please create a new example and then run this code. i am using an external css file to run this code and it works perfectly.

    or

    Try to call the image with Relative Path.

    .dfeature-box {
  text-align: center;
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
  max-width: 272px;
}

.dfeature-box .icon {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  width: 106px;
  height: 106px;
  background-color: #ffffff;
  border-radius: 16px;
  text-align: center;
  margin-bottom: 35px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
  box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.sprite-bg {
  background: url("https://i.imgur.com/VO1dBBA.jpg");
}

.bg-1 {
  width: 62px;
  height: 62px;
  background-position: 0px 61px;
}

.bg-2 {
  width: 64px;
  height: 62px;
  background-position: 62px 61px;
}

.bg-3 {
  width: 64px;
  height: 62px;
  background-position: 127px;
}

.dfeature-box .icon i {
  font-size: 50px;
  background: -webkit-linear-gradient(to bottom, #45b35e, #6ad56a);
  background: linear-gradient(to bottom, #45b35e, #6ad56a);
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hustbee</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <div class="dfeature-box">
    <div class="icon">
      <div class="sprite-bg bg-1"></div>
    </div>
    <div class="title">TITLE</div>
    <div class="details">long description.</div>
  </div>

  <div class="dfeature-box">
    <div class="icon">
      <div class="sprite-bg bg-2"></div>
    </div>
    <div class="title">TITLE</div>
    <div class="details">long description.</div>
  </div>

  <div class="dfeature-box">
    <div class="icon">
      <div class="sprite-bg bg-3"></div>
    </div>
    <div class="title">TITLE</div>
    <div class="details">long description.</div>
  </div>
</body>

</html>