How to use an image as background in AngularJS?

up vote
2
down vote

favorite

Here is the problem :

This thing is turning me crazy since three days... I would like to use an angularJS variable as background image without using a directive.

My goal is to load any type of image (square, rectangle...etc), reduce it to match a 150px circle size (hidden what's too much) and center it into my page, without the image being squeezed (so keep the aspect ratio).

I'm using ionic 1.0, angular 1.6, so i tried to import this directive : https://www.npmjs.com/package/angular-background-image/v/0.1.2 but this doesn't work because of the "require" part.

I followed this angularjs: ng-src equivalent for background-image:url(...) but either this didn't work.

Here is the final solution :

Plunker : https://next.plnkr.co/edit/HMexvebJBXLg9Auu

// Here is the variable containing the image link



var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    overflow: hidden;

    border: 3px solid red;

    margin-left: auto;

    margin-right: auto;

}

<script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

  <div>

      <div ng-style="{'background-image': 'url(' + avatar + ')'}" id="rounded-image"></div>

  </div>

  </body>

edited Nov 7 at 18:08

asked Nov 7 at 12:58

Memphis

10613

1

You cannot write an ng-style statement like that. If those are all constants, why are you even using ng-style in the first place? Please review the AngularJS docs on how ng-style works. Also, your plunker doesn't load - it just gives a bunch of angular errors. I fixed it a bit but am still unsure if this is what you are trying to achieve: plnkr.co/edit/45o6uPMcHWJVxx4JF5D9
– james00794
Nov 7 at 13:12

Actually, called like this data-ng-src="{{avatar}}" the image remains an image and not a background, that's why i tried to set it as background using ng-style, but you are right it was not the good way to do so.. :/
– Memphis
Nov 7 at 14:08

1

I see - I misunderstood what you were trying to do. Actually, ng-style is a reasonable thing to use here. It doesn't really make sense to use a background-image on an img though, so I would suggest using a div instead. The trick is to only set the background-image property with ng-style... everything else can be set in a css class/id. See my new example plunker: next.plnkr.co/edit/djiM21laCmmTxyw8
– james00794
Nov 7 at 14:35

Oh wow you made my day ! That's exactly what i tried to achieve. There is just a last thing i need to understand, how to set the circle around the image ? I tried this way, but had a strange behaviour : next.plnkr.co/edit/ZFaO5mgdjOGR7h8z
– Memphis
Nov 7 at 15:50

1

Just add border: 3px solid red; to the #rounded-image selector. No need to add that circle-image class.
– james00794
Nov 7 at 16:16

add a comment |

up vote
2
down vote

favorite

Here is the problem :

This thing is turning me crazy since three days... I would like to use an angularJS variable as background image without using a directive.

I'm using ionic 1.0, angular 1.6, so i tried to import this directive : https://www.npmjs.com/package/angular-background-image/v/0.1.2 but this doesn't work because of the "require" part.

I followed this angularjs: ng-src equivalent for background-image:url(...) but either this didn't work.

Here is the final solution :

Plunker : https://next.plnkr.co/edit/HMexvebJBXLg9Auu

// Here is the variable containing the image link



var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    overflow: hidden;

    border: 3px solid red;

    margin-left: auto;

    margin-right: auto;

}

<script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

  <div>

      <div ng-style="{'background-image': 'url(' + avatar + ')'}" id="rounded-image"></div>

  </div>

  </body>

edited Nov 7 at 18:08

asked Nov 7 at 12:58

Memphis

10613

1

You cannot write an ng-style statement like that. If those are all constants, why are you even using ng-style in the first place? Please review the AngularJS docs on how ng-style works. Also, your plunker doesn't load - it just gives a bunch of angular errors. I fixed it a bit but am still unsure if this is what you are trying to achieve: plnkr.co/edit/45o6uPMcHWJVxx4JF5D9
– james00794
Nov 7 at 13:12

Actually, called like this data-ng-src="{{avatar}}" the image remains an image and not a background, that's why i tried to set it as background using ng-style, but you are right it was not the good way to do so.. :/
– Memphis
Nov 7 at 14:08

1

I see - I misunderstood what you were trying to do. Actually, ng-style is a reasonable thing to use here. It doesn't really make sense to use a background-image on an img though, so I would suggest using a div instead. The trick is to only set the background-image property with ng-style... everything else can be set in a css class/id. See my new example plunker: next.plnkr.co/edit/djiM21laCmmTxyw8
– james00794
Nov 7 at 14:35

Oh wow you made my day ! That's exactly what i tried to achieve. There is just a last thing i need to understand, how to set the circle around the image ? I tried this way, but had a strange behaviour : next.plnkr.co/edit/ZFaO5mgdjOGR7h8z
– Memphis
Nov 7 at 15:50

1

Just add border: 3px solid red; to the #rounded-image selector. No need to add that circle-image class.
– james00794
Nov 7 at 16:16

add a comment |

up vote
2
down vote

favorite

Here is the problem :

This thing is turning me crazy since three days... I would like to use an angularJS variable as background image without using a directive.

I'm using ionic 1.0, angular 1.6, so i tried to import this directive : https://www.npmjs.com/package/angular-background-image/v/0.1.2 but this doesn't work because of the "require" part.

I followed this angularjs: ng-src equivalent for background-image:url(...) but either this didn't work.

Here is the final solution :

Plunker : https://next.plnkr.co/edit/HMexvebJBXLg9Auu

// Here is the variable containing the image link



var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    overflow: hidden;

    border: 3px solid red;

    margin-left: auto;

    margin-right: auto;

}

<script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

  <div>

      <div ng-style="{'background-image': 'url(' + avatar + ')'}" id="rounded-image"></div>

  </div>

  </body>

edited Nov 7 at 18:08

asked Nov 7 at 12:58

Memphis

10613

Here is the problem :

This thing is turning me crazy since three days... I would like to use an angularJS variable as background image without using a directive.

I'm using ionic 1.0, angular 1.6, so i tried to import this directive : https://www.npmjs.com/package/angular-background-image/v/0.1.2 but this doesn't work because of the "require" part.

I followed this angularjs: ng-src equivalent for background-image:url(...) but either this didn't work.

Here is the final solution :

Plunker : https://next.plnkr.co/edit/HMexvebJBXLg9Auu

// Here is the variable containing the image link



var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    overflow: hidden;

    border: 3px solid red;

    margin-left: auto;

    margin-right: auto;

}

<script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

  <div>

      <div ng-style="{'background-image': 'url(' + avatar + ')'}" id="rounded-image"></div>

  </div>

  </body>

// Here is the variable containing the image link



var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    overflow: hidden;

    border: 3px solid red;

    margin-left: auto;

    margin-right: auto;

}

<script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

  <div>

      <div ng-style="{'background-image': 'url(' + avatar + ')'}" id="rounded-image"></div>

  </div>

  </body>

// Here is the variable containing the image link



var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    overflow: hidden;

    border: 3px solid red;

    margin-left: auto;

    margin-right: auto;

}

<script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

  <div>

      <div ng-style="{'background-image': 'url(' + avatar + ')'}" id="rounded-image"></div>

  </div>

  </body>

html css angularjs

edited Nov 7 at 18:08

asked Nov 7 at 12:58

Memphis

10613

edited Nov 7 at 18:08

asked Nov 7 at 12:58

Memphis

10613

edited Nov 7 at 18:08

asked Nov 7 at 12:58

Memphis

10613

asked Nov 7 at 12:58

Memphis

10613

asked Nov 7 at 12:58

Memphis

10613

1

You cannot write an ng-style statement like that. If those are all constants, why are you even using ng-style in the first place? Please review the AngularJS docs on how ng-style works. Also, your plunker doesn't load - it just gives a bunch of angular errors. I fixed it a bit but am still unsure if this is what you are trying to achieve: plnkr.co/edit/45o6uPMcHWJVxx4JF5D9
– james00794
Nov 7 at 13:12

Actually, called like this data-ng-src="{{avatar}}" the image remains an image and not a background, that's why i tried to set it as background using ng-style, but you are right it was not the good way to do so.. :/
– Memphis
Nov 7 at 14:08

1

I see - I misunderstood what you were trying to do. Actually, ng-style is a reasonable thing to use here. It doesn't really make sense to use a background-image on an img though, so I would suggest using a div instead. The trick is to only set the background-image property with ng-style... everything else can be set in a css class/id. See my new example plunker: next.plnkr.co/edit/djiM21laCmmTxyw8
– james00794
Nov 7 at 14:35

Oh wow you made my day ! That's exactly what i tried to achieve. There is just a last thing i need to understand, how to set the circle around the image ? I tried this way, but had a strange behaviour : next.plnkr.co/edit/ZFaO5mgdjOGR7h8z
– Memphis
Nov 7 at 15:50

1

Just add border: 3px solid red; to the #rounded-image selector. No need to add that circle-image class.
– james00794
Nov 7 at 16:16

add a comment |

1

You cannot write an ng-style statement like that. If those are all constants, why are you even using ng-style in the first place? Please review the AngularJS docs on how ng-style works. Also, your plunker doesn't load - it just gives a bunch of angular errors. I fixed it a bit but am still unsure if this is what you are trying to achieve: plnkr.co/edit/45o6uPMcHWJVxx4JF5D9
– james00794
Nov 7 at 13:12

Actually, called like this data-ng-src="{{avatar}}" the image remains an image and not a background, that's why i tried to set it as background using ng-style, but you are right it was not the good way to do so.. :/
– Memphis
Nov 7 at 14:08

1

I see - I misunderstood what you were trying to do. Actually, ng-style is a reasonable thing to use here. It doesn't really make sense to use a background-image on an img though, so I would suggest using a div instead. The trick is to only set the background-image property with ng-style... everything else can be set in a css class/id. See my new example plunker: next.plnkr.co/edit/djiM21laCmmTxyw8
– james00794
Nov 7 at 14:35

Oh wow you made my day ! That's exactly what i tried to achieve. There is just a last thing i need to understand, how to set the circle around the image ? I tried this way, but had a strange behaviour : next.plnkr.co/edit/ZFaO5mgdjOGR7h8z
– Memphis
Nov 7 at 15:50

1

Just add border: 3px solid red; to the #rounded-image selector. No need to add that circle-image class.
– james00794
Nov 7 at 16:16

You cannot write an ng-style statement like that. If those are all constants, why are you even using ng-style in the first place? Please review the AngularJS docs on how ng-style works. Also, your plunker doesn't load - it just gives a bunch of angular errors. I fixed it a bit but am still unsure if this is what you are trying to achieve: plnkr.co/edit/45o6uPMcHWJVxx4JF5D9
– james00794
Nov 7 at 13:12

Actually, called like this data-ng-src="{{avatar}}" the image remains an image and not a background, that's why i tried to set it as background using ng-style, but you are right it was not the good way to do so.. :/
– Memphis
Nov 7 at 14:08

I see - I misunderstood what you were trying to do. Actually, ng-style is a reasonable thing to use here. It doesn't really make sense to use a background-image on an img though, so I would suggest using a div instead. The trick is to only set the background-image property with ng-style... everything else can be set in a css class/id. See my new example plunker: next.plnkr.co/edit/djiM21laCmmTxyw8
– james00794
Nov 7 at 14:35

Oh wow you made my day ! That's exactly what i tried to achieve. There is just a last thing i need to understand, how to set the circle around the image ? I tried this way, but had a strange behaviour : next.plnkr.co/edit/ZFaO5mgdjOGR7h8z
– Memphis
Nov 7 at 15:50

Just add border: 3px solid red; to the #rounded-image selector. No need to add that circle-image class.
– james00794
Nov 7 at 16:16

add a comment |

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

After fixing all the syntax errors, the code seems to work.

var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    border: 5px solid rgba(0, 0, 0, 0.4);

    overflow: hidden;

}



#rounded-image:before {

    content: "";

    /* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */

    background-size: cover;

    width: 100%;

    height: 100%;

    display: block;

    overflow: hidden;

}

  <script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

    <img data-ng-src="{{avatar}}" id="rounded-image">

  </body>

The image is centered in the circle.

answered Nov 7 at 13:25

georgeawg

32k104865

Thanks for the answer ! Yes this is the results I'm getting on the app, the problem is i'm getting a squeezed image, instead of a crop one... Even if I write background-size: contain; the image is squeezed. What i'm trying to achieve is from every source image : reduce it to match the cercle, center it and hidden all the rest of the image.
– Memphis
Nov 7 at 13:39

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53189919%2fhow-to-use-an-image-as-background-in-angularjs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

After fixing all the syntax errors, the code seems to work.

var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    border: 5px solid rgba(0, 0, 0, 0.4);

    overflow: hidden;

}



#rounded-image:before {

    content: "";

    /* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */

    background-size: cover;

    width: 100%;

    height: 100%;

    display: block;

    overflow: hidden;

}

  <script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

    <img data-ng-src="{{avatar}}" id="rounded-image">

  </body>

The image is centered in the circle.

answered Nov 7 at 13:25

georgeawg

32k104865

Thanks for the answer ! Yes this is the results I'm getting on the app, the problem is i'm getting a squeezed image, instead of a crop one... Even if I write background-size: contain; the image is squeezed. What i'm trying to achieve is from every source image : reduce it to match the cercle, center it and hidden all the rest of the image.
– Memphis
Nov 7 at 13:39

add a comment |

up vote
2
down vote

accepted

After fixing all the syntax errors, the code seems to work.

var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    border: 5px solid rgba(0, 0, 0, 0.4);

    overflow: hidden;

}



#rounded-image:before {

    content: "";

    /* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */

    background-size: cover;

    width: 100%;

    height: 100%;

    display: block;

    overflow: hidden;

}

  <script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

    <img data-ng-src="{{avatar}}" id="rounded-image">

  </body>

The image is centered in the circle.

answered Nov 7 at 13:25

georgeawg

32k104865

Thanks for the answer ! Yes this is the results I'm getting on the app, the problem is i'm getting a squeezed image, instead of a crop one... Even if I write background-size: contain; the image is squeezed. What i'm trying to achieve is from every source image : reduce it to match the cercle, center it and hidden all the rest of the image.
– Memphis
Nov 7 at 13:39

add a comment |

up vote
2
down vote

accepted

After fixing all the syntax errors, the code seems to work.

var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    border: 5px solid rgba(0, 0, 0, 0.4);

    overflow: hidden;

}



#rounded-image:before {

    content: "";

    /* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */

    background-size: cover;

    width: 100%;

    height: 100%;

    display: block;

    overflow: hidden;

}

  <script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

    <img data-ng-src="{{avatar}}" id="rounded-image">

  </body>

The image is centered in the circle.

answered Nov 7 at 13:25

georgeawg

32k104865

After fixing all the syntax errors, the code seems to work.

var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    border: 5px solid rgba(0, 0, 0, 0.4);

    overflow: hidden;

}



#rounded-image:before {

    content: "";

    /* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */

    background-size: cover;

    width: 100%;

    height: 100%;

    display: block;

    overflow: hidden;

}

  <script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

    <img data-ng-src="{{avatar}}" id="rounded-image">

  </body>

The image is centered in the circle.

var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    border: 5px solid rgba(0, 0, 0, 0.4);

    overflow: hidden;

}



#rounded-image:before {

    content: "";

    /* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */

    background-size: cover;

    width: 100%;

    height: 100%;

    display: block;

    overflow: hidden;

}

  <script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

    <img data-ng-src="{{avatar}}" id="rounded-image">

  </body>

var app = angular.module('app', );



app.controller("Ctrl",function($scope){

  

  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";

});

#rounded-image {

    border-radius: 50%;

    width: 150px;

    height: 150px;

    border: 5px solid rgba(0, 0, 0, 0.4);

    overflow: hidden;

}



#rounded-image:before {

    content: "";

    /* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */

    background-size: cover;

    width: 100%;

    height: 100%;

    display: block;

    overflow: hidden;

}

  <script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="app" ng-controller="Ctrl">

    <img data-ng-src="{{avatar}}" id="rounded-image">

  </body>

answered Nov 7 at 13:25

georgeawg

32k104865

answered Nov 7 at 13:25

georgeawg

32k104865

answered Nov 7 at 13:25

georgeawg

32k104865

answered Nov 7 at 13:25

georgeawg

32k104865

Thanks for the answer ! Yes this is the results I'm getting on the app, the problem is i'm getting a squeezed image, instead of a crop one... Even if I write background-size: contain; the image is squeezed. What i'm trying to achieve is from every source image : reduce it to match the cercle, center it and hidden all the rest of the image.
– Memphis
Nov 7 at 13:39

add a comment |

Thanks for the answer ! Yes this is the results I'm getting on the app, the problem is i'm getting a squeezed image, instead of a crop one... Even if I write background-size: contain; the image is squeezed. What i'm trying to achieve is from every source image : reduce it to match the cercle, center it and hidden all the rest of the image.
– Memphis
Nov 7 at 13:39

Thanks for the answer ! Yes this is the results I'm getting on the app, the problem is i'm getting a squeezed image, instead of a crop one... Even if I write background-size: contain; the image is squeezed. What i'm trying to achieve is from every source image : reduce it to match the cercle, center it and hidden all the rest of the image.
– Memphis
Nov 7 at 13:39

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk