SharePoint Promoted Links Image Size

Question

I wanted to customize my promoted links. First of all I added this code to my SharePoint Website and changed the size of the tiles. After that I uploaded the graphics I want to show in my promoted link as background-image. I did this with Photoshop with the exact specification of the pixels. Then I add the graphics to the promoted links.

Problem: The position of the graphic is always moving to the left. I tried it with

div.ms-tileview-tile-content > a > img {
    width: 100% !important;
    height: 100% !important;
}      

but it does not work. I also tried with exact specification of the pixels. It does not work. I dont know why. Maybe some of your professionals can help me?:)

My current code:

<style type="text/css">
    div.ms-tileview-tile-content {
        background-color: grey; 
    } 
    .ms-promlink-body {
        width: 1170px;
    }  

    .ms-promlink-header
    {
                display: none;
    }

    /* tile dimensions, including inter-tile margin */
    div.ms-tileview-tile-root {
        width: 235px !important;
        height: 150px !important;
    }

    /*  tile and title( + description) overlay dimensions */
    div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
        width: 230px !important;
        height: 145px !important;
    }

    /*Image*/
    .ms-tileview-tile-content img {text-align:center; width: 86px; height: 96px;}

    /*  description text class  */
    li.ms-tileview-tile-descriptionMedium {
        padding-top: 5px;
        font-size: 12px;
    }

    /*  title text when description not shown  */
    div.ms-tileview-tile-titleTextMediumCollapsed {
        /* background-color: rgba(0, 0, 0, 0.6); */

        width: 230px;
        height: 150px;
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 5px 5px 5px;
        font-size: 13px;
        line-height: 18px;
    }
</style>     

I would be grateful for any reply :)

Answer 1

I've had the exact same problem for weeks, but have finally found the solution: Add these lines

/* BG was larger than image by "right" class, this removes it */    
.ms-promlink-body img{  
right:inherit!important; 
} 

to your code behind the ms-promlink-body declaration and finally smaller images (with the correct size) are not shifted to the left anymore, but fit into their tiles the way they're supposed to.

Answer 2

Change

div.ms-tileview-tile-content > a > img {

to

div.ms-tileview-tile-content > a > div > img {

Answer 3

Check out the following CSS.

<style>
#pageContentTitle {display:none;}
</style>

​<style type="text/css"> 
/* tile row height */ 
div.ms-promlink-body { height: 80px; } 

/* tile dimensions, including inter-tile margin */ 
div.ms-tileview-tile-root { width: 110px !important; height: 90px !important; } 

/* tile and title( + description) overlay dimensions */ 
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox 
{ width: 100px !important; height: 90px !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: 80px; padding: 4px 7px 7px; font-size: 11px; line-height: 14px; } 

/* description text class */ 
li.ms-tileview-tile-descriptionMedium { padding-top: 10px; font-size: 11px; } 

/* title text when description not shown */
 div.ms-tileview-tile-titleTextMediumCollapsed { background-color: rgba(0, 0, 0, 0.6); width: 86px; height: 60px; position: absolute; top: -50px; left: 0px; padding: 2px 7px 0px; font-size: 12px; line-height: 15px; } 
</style>

It changes the padding, position etc. as well as the size of the image (without resizing first if needed).