Problem putting a background image in only one view

Question

Problem putting a background image in only one view

Navigation

#1 by (1 votes)
#2 by (1 votes)

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:

I'mdoingthefollowing:

<divclass="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 is in 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 in body , this way: <body class="background"> works perfectly, but when I try to put it in a div direct on the page it gets the How do I resolve this problem?

angularjs css background

asked by anonymous 13.10.2015 / 14:32

2 answers

1

Try doing the following:

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*/
}

18.10.2015 / 03:20

Delete post through meta_value Wordpress Problem with ViewBag and ViewData for Creating Breadcrumbs

score 1 · Accepted Answer

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

As you are interested in setting a specific background for your login view , one of the simplest ways would be to work with control variables to change / add a class in tag body . One of the options in this case is to use the ngClass directive. Here is an example:

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

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

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

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

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

The problem is that none of these elements has a defined height, so you'll need to assign the height of the page in each of them. In short it would be something like:

html, body {
    height: 100%;
}

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

.background {
    height: 100%;
}

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