Angular Background Image

[Jared Wiltshire]

@atkins.chrisw said in Angular Background Image:

<base href="/user-dashboards/chrisground/

Hmm, no what you have should work. When you update the module the module's folder will be deleted, did you put the image in the overrides folder?

[atkins.chrisw]

Yeah it is in the overrides folder. It in the following:
root/mango/overrides/web/modules/dashboards/vitalityimages

[atkins.chrisw]

sorry. vitalimages

[atkins.chrisw]

Any luck? This background is kinda important

[Jared Wiltshire]

OK so the HTML layout in main.html changed a little, update your CSS rule to the following

md-content.main-content {
  background-image: url(/modules/dashboards/web/vitalimages/Test3.jpg);
}

[atkins.chrisw]

That worked great!!

[atkins.chrisw]

Sorry Jared,

how would I make the date/pickers have a white color instead of the black?

[Jared Wiltshire]

@atkins.chrisw said in Angular Background Image:

Sorry Jared,

how would I make the date/pickers have a white color instead of the black?

Sorry for the extremely delayed response but you can easily change this by creating a "dark" theme and applying it to the section of the page you want inverted colors on.

In app.js copy the theme you are using and add .dark() to it. e.g. for the adminTemplate you will have

    // configure the angular material colors
    $mdThemingProvider
        .theme('default')
        .primaryPalette('yellow')
        .accentPalette('red');

    $mdThemingProvider
        .theme('dark')
        .primaryPalette('yellow')
        .accentPalette('red')
        .dark();

Then use the dark theme on the page where you want -

<md-toolbar md-theme="dark">

[shaun]

Hi Guys,

I'm having a problem with the following not giving me the expected results... I'm assuming the content in this thread applies to the admin template? I've put in :

 <style>
   md-content.main-content {
     background-image: url(/modules/dashboards/web/images/bg/blue_dots_blur3.jpg);
   }
 </style>

And I see no change.

I've also put in

   <style>
     body {
     background-image: url(/modules/dashboards/web/images/bg/blue_dots_blur3.jpg);
     }
   </style>

and I see the background image flash up when i hit reload and see the spinning gear, but then the dashboard pops up over the top and its all white.

Any suggestions?

[Jared Wiltshire]

Hey shaun, the best way to figure out what is going on is to use Chrome and open the inspector (right click on page and choose Inspect). Find the element (on the elements tab) you are trying to add a background to and check its styles. You will also be able to see if the .jpg is actually being loaded or is not found (404 error etc) in the console.

If you style the body tag you will not see the background as there are other elements "in front" of the body element which have opaque backgrounds. Also if you are targeting md-content.main-content which is the main content pane you may have to add a !important to your CSS rule to override inline styles.

[shaun]

Thanks @Jared-Wiltshire! great advice.
Its fixed now, but im not sure where I went wrong.. best guess is a typo - perhaps a misplaced closing } or something.