Problem placing a background image in only one view

Asked

Viewed 1,831 times

2

I have a small system in Angular where I have a login screen: But when I try to put a background image the result is not as expected:

inserir a descrição da imagem aqui

I’m doing it this way:

<div class="background">
../Código da página
</div>

CSS:

.background{
  background: url(nature.jpg) no-repeat center center fixed;
  background-size: cover; /*Css padrão*/
  -webkit-background-size: cover; /*Css safari e chrome*/
  -moz-background-size: cover; /*Css firefox*/
  -ms-background-size: cover; /*Css IE não use mer#^@%#*/
  -o-background-size: cover; /*Css Opera*/
}

This login page is rendered via ng-view which sits on a div in my index.html:

index.html:

<body>
   <div ng-view></div>
</body>

If I put my class CSS which is responsible for the background image on body, thus: <body class="background"> works perfectly, but when I try to put it into a div right on the page gets the blanks, how do I solve this problem?

css angularjs background

  • Can create a fiddle?

  • @Renan might, but I don’t know if you can use ng-view in fiddle

2 answers

1

Try to do it this way:

CSS:

html,body{ height: 100%; }
.background{
   height: 100%;
   background: url(nature.jpg) no-repeat center center fixed;
   background-size: cover; /*Css padrão*/
   -webkit-background-size: cover; /*Css safari e chrome*/
   -moz-background-size: cover; /*Css firefox*/
   -ms-background-size: cover; /*Css IE não use mer#^@%#*/
   -o-background-size: cover; /*Css Opera*/
}

1


The simplest solution would be to assign the CSS property background-image directly on the tag body.

How do you have an interest in defining a background specific to your view login, one of the simplest ways would be to work with control variables to change/add a class in the tag body. One option in this case is to use the directive ngClass. Follow an example:

<body ng-class="{login: variavelDeControle}">

With the class added to the element, simply make a specific selector to change the background:

body.login {
    background-image: url('endereco-da-imagem.png');
}

To assign the image of background using the div.background, according to code you shared, we will need to change the style of various elements. They are:

[1] body > [2] div[ng-view] > [3] div.background

The problem is that none of these elements have a set height, so you will need to assign the page height in each of them. Summing up would be something like:

html, body {
    height: 100%;
}

body > div[ng-view] {
    height: 100%;
}

.background {
    height: 100%;
}

I prepared a plunker de exemplo to assist in its implementation.

  • Your solution has adjusted the image but still has two blanks above and below: http://i.stack.Imgur.com/Gcgfh.jpg

  • You can send a screenshot with the developer console open for us to see better HTML?

  • Ready: http://i.stack.Imgur.com/Xsntp.png

  • This header is inside the div.background? We’ll need the rest of the HTML to solve the problem.

  • Yes, div.background is the first div of the login page, then I call the login page via ng-view

  • 1

    @Techies edited the solution! Take a look after!

  • All right, I’m gonna go take a test.

  • It worked @Romulo, thank you very much

Show 3 more comments

Browser other questions tagged css angularjs background

You are not signed in. Login or sign up in order to post.