background-size: cover w/ Angular2

Question

Hi everyone,

I'm actually learning Angular2 and i'm stuck with a ...css issue o_O I was searching for a similar issue without any success, here we go:

I have a single main tag element within the body

I set up background-image within the main div and used background-size: cover to fit but it doesn't seems to work at all, the picture doesn't fit to the div..

I'm very confused because it's the first time that it happened to me

For your information: I used styleUrls to inject css rules within the component

Code

body {

    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

main {

    color: #fff;
    position: relative;
    width: 90%;
    height: 90%;
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-size: cover;
    background: url(../assets/fond.jpg) no-repeat;
    box-shadow: 30px 3px 36px -15px grey, -30px 3px 36px -15px grey;

}

Thanks!

it has nothing to do with Angular2. check whether your css is getting applied or not ! — micronyks
I added 'Angular2' because I built the old version w/ React and I've never had this problem and the code worked — R. Di Rago
You were almost right, I had to use -webkit-background-size: cover I only have to do this w/ Angular o_O — R. Di Rago

tao tao · Accepted Answer · 2016-12-31T18:57:17

This should work:

<main [style.backgroundSize]="'cover'"></main>

Please note the single quotes in between the double quotes. Without them, cover would be evaluated as a $scope property (which does not exist). You need to pass the value as string.

Alternatively, if you want to control and dynamically change the contents of a style directive property, you could just use

<main [style.attributeName]="styleHanlder"></main>

Where attributeName is any DOM element style property and styleHanlder is the name of your handler function in $scope, where you assign values to that property according to your apps' logic. Of course, you can pass a bunch of attributes by using <main [style]="styleHanlder"></main>, in which case you'd need to return an object {attributeName:"value", anotherAttribute:"value"}.

background-size: cover w/ Angular2

Hi everyone,

1 Answers