I am trying to make a promoted tile a size of 128x128, but for some reason on some of the tiles I see the tile being filled in with the color green on the right part of the image even though my image has no green. If I change the size to 200x200 the green color is removed from the right part of the image and my image is seen as I would expect, but not at its smaller size.

How do I get the image at 128x128 and for the image to look "normal" other than being smaller.

Here is the CSS that seems to be the problem.

<style type="text/css">
  .ms-tileview-tile-content IMG {
    WIDTH:128 px !important; HEIGHT: 128px!important


<style type="text/css">
    WIDTH: 128px !important; 
    HEIGHT: 128px !important;
  • Can you tell me the difference between the .ms-tileview-tile-content in your post and the div.ms-tileview-tile-content > a > img found in the post from Murphy
    – daPlayaURH
    Dec 24 '17 at 23:03

I often use the following. You just need to adjust heights and widths. Read the comments between /* */ what it is you're editing.

/*  tile row height */
div.ms-promlink-body {
    height: 100px;
/*  tile dimensions, including inter-tile margin */
div.ms-tileview-tile-root {
    width: 110px !important;
    height: 110px !important;
/*  tile and title( + description) overlay dimensions */
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
    width: 100px !important;
    height: 100px !important;
/*  tile background image dimensions */
div.ms-tileview-tile-content > a > img {
    width: 100% !important;
    height: 100% !important;
/*  title and description text  */
ul.ms-tileview-tile-detailsListMedium {
    height: 100px;
    padding: 4px 7px 7px;
    font-size: 12px;
    line-height: 16px;
/*  description text class  */
li.ms-tileview-tile-descriptionMedium {
    padding-top: 10px;
    font-size: 12px;
/*  title text when description not shown  */
div.ms-tileview-tile-titleTextMediumCollapsed {
    background-color: rgba(0, 0, 0, 0.5);
    width: 86px;
    height: 29px;
    position: absolute;
    top: -33px;
    left: 0px;
    padding: 4px 7px 0px;
    font-size: 12px;
    line-height: 13px;
.ms-promlink-headerNav {
    display: none;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.