How can I assign a background image to a specific state or template using AngularJS?

While attempting to style the entire template with a CSS div tag, I encountered an issue. The code snippet used was:

<div ng-style="{'background-image': 'url(/images/food.png)', 'background-repeat': 'repeat-y'}">
    <img src="/images/final.png" class="brandImg center-block">
    <h3 class="text-center"> Please Enter your Registered Mobile Number to Login</h3>

    <form novalidate name="CSloginForm" ng-submit="loginCustomer()" role="form" class="csLoginForm col-xs-6 col-xs-offset-3">
        <div class="form-group col-xs-offset-1">
            <label for="phno" style="font: 22px sans-serif;">Mobile No</label>
            <input type="tel" name="phno" id="phno" style="margin-left: 60px; width: 300px; margin-top: 50px; margin-bottom: 20px" class="phInput" ng-maxlength="10" ng-minlength="10" ng-model="csNumber" required />
        </div>
        <div class="form-actions">
            <button type="submit" ng-disabled="CSloginForm.$invalid" class="btn btn-primary btn-lg col-xs-offset-9" ng-click="csLookUp()" style="margin-bottom: 10px">Start</button>
        </div>
    </form>
</div>

It seems that this implementation only applied the background to the header of the page, rather than the entire page as intended.

htmlcssangularjs

Answer №1

To achieve this, you can utilize $rootScope. Objects placed in the root scope are automatically available to all child scopes.

angular.module('app').run(function($rootScope) {
  $rootScope.app = { background-image: 'url(/images/default.png)' };
});

To apply the background to the body of your base HTML template (not a div), use the following code:

<html ng-app="app">
  <head>
    ...
  </head>
  <body ng-style="{'background-image': app.background, 'background-repeat': 'repeat-y'}">
     ...
  </body>

If your view contains a controller:

<div ng-controller="PageCtrl">
  ..
</div>

You can access and modify the background using the controller like so:

angular.module('app').controller('PageCtrl', function($scope) {
  $scope.app.background = 'url(/images/food.png)';
});

While it is possible to set the background using ng-init without a controller, this approach is not recommended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am having trouble styling a pre-existing class in bootstrap using my custom CSS file

html <section id="title"> <div class="container-fluid"> <!-- Nav Bar --> <nav class="navbar navbar-expand-lg navbar-dark"> <a class=" navbar-brand">tindog</a> ...

htmlcssbootstrap-5

Utilizing AngularJS for Converting Date Formats from JSON and HTML Elements

So I have this controller set up. function TestCtrl($scope) { var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>'; var dateFromJson = '/Date(1394526738123)/'; $scope.Date = dateFromJso ...

javascriptjqueryhtmljsonangularjs

How can AngularJS achieve ng-repeat functionality with multiple variables similar to ng-init?

When using ng-init, you have the ability to utilize multiple variables: ng-init="var1=value1; var2=value2" I attempted something similar with ng-repeat but unfortunately it did not work as expected ng-repeat= "var1 in var1s; var2 in var2s" Is there a p ...

javascriptangularjs

Refresh the click event on a newly added element in the backbone framework

As a newcomer to backbone.js and using CodeIgniter as my PHP Framework, I encountered a challenge while developing an existing system that uses a backbone.js library. The problem is straightforward if approached with jQuery, but due to the use of backbone ...

phpjqueryhtmlcodeigniterbackbone.js

Utilize custom {tags} for replacing strings in a CSS file using str_replace in PHP

My code consists of a script that updates a CSS file based on user input from an html form. The script executes a str_replace function, scanning the CSS file for specific "tags". For example: html,body { background: {bgcolor} url(../images/bg.jpg) re ...

phphtmlcssstr-replace

The touchstart event is activated when you touch an item within

Is it possible to retrieve the index of ul li elements with touchstart, similar to how it can be done with a click function? <ul id = "list" ontouchstart="touchStart(event,'issues')"> <li> ...

jqueryhtml

What is the best way to extract a state from a URL utilizing ui-router?

If I have something similar to this scenario: {ui-sref="tab({tabid:3})"} Once the element with the above attribute is clicked, it will trigger a state that results in a URL such as /tab/:tabid. For instance, http://..../tab/3 However, here lies my issu ...

angularjsangular-ui-routerangular-material

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Is there a method to automatically number table data in a local or custom language? As a Bengali individual, I have figured out how to automatically number the first data of each row using css and js. However, I am uncertain about how to implement custom n ...

javascripthtmljquerycss

What could be the reason for the hover class not functioning properly in Tailwind?

Looking for some help with styling a button in Next.js using Tailwind. Specifically, I want the background color of the button to change when hovered over. I've been experimenting with code like this: <button className="rounded-full bg-gradie ...

cssnext.jshovertailwind-css

Validating Input in a Textbox Using Jquery When Pasting Data

My HTML textbox is set up to prevent special characters from being entered, but I've noticed that the validation doesn't trigger when I paste text using Ctrl + V. Is there a way to address this issue? ...

jqueryhtml

Issue with static resource fetching when referencing a .js file within an HTML document while using Flask

My HTML file loads my OpenLayers JavaScript file (which displays a map frame) when opened directly. However, when running the HTML from my Flask python app, the JavaScript file/object fails to load (resulting in no map display, just some heading text). I ...

javascriptpythonhtmlcssflask

Storing HTML form values for other pages in PHP and MySQLi can be achieved by using session variables or by

I recently set up a database using phpMyAdmin that includes tables for different topics such as Math, Physics, etc. Each topic is assigned a unique topic_id as the primary key in the table tb_topic. Additionally, each topic can have multiple videos associa ...

phphtml

Connecting users from a mobile website to a particular item within the Amazon application

Recently, I've been working on linking from my mobile site to a particular item within the Amazon app. My JavaScript code includes a try/catch block that redirects users to the webpage if they don't have the app installed. However, I've foun ...

javascriptjqueryhtmliosurl

Improving Angular factory's counter with socket.io integration

I am currently working on a solution to automatically update the number of incoming data. I have set up a system to listen for incoming messages and count them in a factory: angular.module('app') .factory('UpdateCounter', ['s ...

angularjssocket.iocounter

Animated SVG Arrow Design

I created a dynamic SVG animation that grows as you hover over it. Since I'm still learning about SVG animations, I encountered some issues with my implementation. The animation is quite straightforward - when hovering over the SVG arrow, the line sho ...

javascriptcssreactjssvggatsby

Complete the execution of the jQuery function

It may seem like a simple idea - to stop executing a function, just use return false, return, or call on a function like undefined. However, in this case, it's not that straightforward. I'm working on a website project that includes a snake game ...

jqueryhtml

Center the first column in jQuery Datatables

Looking to center-align only the first column named "Status": $("#TransactionTable").DataTable({ ajax: { url: '/Transaction/SearchMockup', type: 'POST', data: { ...

jqueryhtmlcssdatatables

Showcase a Pair of Files Next to Eachother using HTML

I am a beginner with HTML and I am trying to accomplish a seemingly simple task. I have searched for similar questions and attempted the solutions provided, but none have worked for me. My goal is to have two documents displayed side by side on a web page ...

javascripthtmlcssimage

What is the process for encoding images in HTML code?

Is there a method to embed a background image directly in the HTML code? For instance: background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX); If I have an image file, can I encode its data and t ...

csshtml

Converting Apache POI Word documents to clean HTML stripping out styles and superfluous tags

I am currently working on converting Word documents to clean HTML. I have been using Apache POI, but it seems to create messy output similar to MS Word's own HTML saving method. What I really need is a solution like the one offered by . For instance, ...

javahtmlcssms-wordapache-poi