CODEWITHSUNDEEP
htmlcsssasssprite
Diesan Romero
Diesan Romero

Reputation: 1658

How to work with sprites images in css and his position?

I'm trying to clone the Google front for educational purposes in my career as a front-end developer. In this case I am working with Google's own sprite. Here I put an image of the sprite with which I am working.

enter image description here

This is the HTML that I carry so far. As you can see, I am still creating the header.

<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Google. Búsqueda avanzada · Programas de publicidadTodo acerca de GoogleGoogle.com in English. © 2020 - Privacidad - Condiciones." />
    <meta name="author" content="Diesan Romero" />

    <link rel="stylesheet" href="./assets/css/main.css" />
    <title>Google</title>

</head>
<body>
    <header>
        <nav>
            <ul class="nav-right__section">
                <li>
                    <a href="#">Gmail</a>
                </li>
                <li>
                    <a href="#">Imágenes</a>
                </li>
                <li>
                    <a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
                </li>
                <li>
                    <a href="#">Iniciar Sesión</a>
                </li>
            </ul>
        </nav>
    </header>
</body>
</html>

On the other hand, this is the sass file that I have so far:

header {
    width: 100%;
    height: 60px;

    nav {
        display: flex;
        justify-content: flex-end;

        .nav-right__section {
            width: 250px;
            height: auto;
            display: flex;
            list-style: none;
            justify-content: center;
            align-items: center;

            a {
                margin-right: 10px;
                color: $black-color;
            }
            a.menu-icon {
                background-image: url('../images/sprite.png');
                background-size: 528px 68px;
                background-position: -132px -38px;
                color: #000;
                opacity: .55;
            }

        }
    }
}

The reason I use sass is because periodically I will take the project to another level, maybe I will pass it to React, etc.

The problem is that I don't know if I'm positioning the sprite well so that it shows me the icon I want. Here is an image of the icon that should come out:

enter image description here

However, this is what I am getting:

enter image description here

Yeah, I know, very sad 😢 Can someone please help me?

Upvotes: 0

Views: 46

Answers (1)

Paulo Moreira
Paulo Moreira

Reputation: 56

I think you just need to set the element as a display:inline-block and give it a size

From what i can see, i think that the element is 0x0 px right now.

Try adding this to the a.menu-icon class

height: 29px;
width: 28px;
display: inline-block;


/* compiled style */

header {
  width: 100%;
  height: 60px;
}

header nav {
  display: flex;
  justify-content: flex-end;
}

header nav .nav-right__section {
  width: 250px;
  height: auto;
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
}

header nav .nav-right__section a {
  margin-right: 10px;
  color: #222;
}

header nav .nav-right__section a.menu-icon {
  background-image: url("https://i.sstatic.net/YTlAV.png");
  background-size: 528px 68px;
  background-position: -132px -38px;
  color: #000;
  opacity: 0.55;
  display: inline-block;
  width: 30px;
  height: 30px;
}
<header>
  <nav>
    <ul class="nav-right__section">
      <li>
        <a href="#">Gmail</a>
      </li>
      <li>
        <a href="#">Imágenes</a>
      </li>
      <li>
        <a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
      </li>
      <li>
        <a href="#">Iniciar Sesión</a>
      </li>
    </ul>
  </nav>

Upvotes: 2

Related Questions