seo Question posted in
Some basic information to get you started with this can be found here.

how to remove white border from sprite image – SEO

I just begun to learn how to use image sprites in order to optimize my site better. However, there is this white border on the right and bottom side of my image element. I searched for posts on here and google and cannot seem to figure out how to remove the border.

I did read it was caused by using the image element, however, I need to use this element for SEO purposes. By using a div it would cripple my SEO in regard to images (from what I have read anyways). Can anyone help me figure this out? It did this in both Chrome and Firefox. Thank you

[White border on right and bottom of image container][1] 
    <img class="image-sprite" src="">

    .image-sprite {
        background: url("../images/gallery-sprite.png");
        background-color: #3a3a3a;
        background-position: -17px -10px;
        background-repeat: no-repeat;
        width: 360px;
        height: 470px;
    }
Tags:

2

Answers


  1. 0

    Are you able to put the background URL directly into the img tag in HTML? Like this:

        .image-sprite {
        background-color: #3a3a3a;
        background-position: -17px -10px;
        background-repeat: no-repeat;
        width: 360px;
        height: 470px;
    }
    
    body{
      background-color: gray;
    }
        <img class="image-sprite" src="https://w3schools.com/html/img_girl.jpg">
    Login or Signup to reply.
  2. 0

    I’ve posted an example below, see can you find any white space on either side? The problem might be the ‘image-size’ you using and dimensions that you are placing your image with. If your image finishes by the time it reaches the right end or bottom end, obviously then and only then you’ll see the white space, otherwise there is no issue in using sprites. Either increase your image in size, or decrease its width and height.

      .image-sprite {
      background: url("https://picsum.photos/200/300");
      background-position: -10 -10px;
      background-repeat: no-repeat;
      width: 100px;
      height: 100px;
  }
    <img class="image-sprite">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search