Cómo usar un fondo de imagen de página completa en la aplicación web basada en AngularJS

Puede hacer esto de la siguiente manera:

  • Aplique un controlador en el nivel del cuerpo.
  • Cree clases para aplicar imágenes de fondo para cada una de sus páginas. Por ejemplo: .home-bg {background: url (image-url);}
  • Cree un servicio que realice un seguimiento de qué página se muestra.
  • Cambia el valor de la clase en función de tus rutas.
  • Aplique ng-class en su etiqueta corporal.
  • Cambia la clase usando una función en el servicio.

Se vería algo así:

app.controller (‘MainController’, [‘$ scope’, ‘BackgroundService’,
función ($ scope, backgroundService) {
$ scope.bgService = backgroundService;
}]);

app.factory (‘BackgroundService’, [function () {
var currentBackgroundClass = ‘home-bg’;
regreso {
setCurrentBg: function (class) {
currentBackgroundClass = class;
},
getCurrentBg: function () {
return currentBackgroundClass;
}
};
}]);

En tu html úsalo así:

Puedes hacerlo a través de CSS de manera muy agradable y efectiva. Todo lo que tiene que hacer es conocer los componentes de la propiedad ‘background’ de CSS3 y algunas otras propiedades como ‘width’ con el valor ‘100%’, ‘height’ con el valor ‘100%’ y ‘margin’ con el valor ‘auto ‘en diferentes escenarios.

Incluso puede cargar diferentes tamaños de la misma imagen en función de diferentes tamaños de pantalla / resolución / dispositivos utilizando el atributo srcset del elemento img.

Simplemente busque en Internet y puede tener una idea clara.

Creo que un CSS receptivo sería suficiente. Angular JS no es necesario.

Imagen de fondo de página completa perfecta | CSS-Tricks

Es similar a otra página html, haga lo mismo que hace para html normal, solo agregue las imágenes basadas en la resolución de pantalla en css usando consultas de medios.

Agregue la imagen a la etiqueta del cuerpo o agregue la misma imagen a todos sus ngView.

Puede usar algunos complementos jquery como Backstretch o Supersized .

Espero que ayude 🙂