Background-image

ionic-v1
22

Seems like path issue,I found solution for myself:

background: url("/resources/img/user.png") - not work
background: url("resources/img/user.png") - not work
background: url("../resources/img/user.png") - work
1 Like
23

path is relative to your view path!
if your view is at www/views/subdir/myview.html then your css background url pointing to ../resources/img/user.png is really trying to load www/views/subdir/../resources/img/user.png

You can easily debug this opeing chrome://inspect

Hope it helps,

24

@pmigabreu any success on this ? did you find any way other than using directive ?

25

Why you use .scroll-content ? ? There is no way to use eg. ion-content and to it add background ? ?

26

Works well for me ! Any idea how to make the background dynamic using an angular variable?
Something like:
background: url("{{currentBgPath}}")

27

Yeah sure i have solution for that =)
Here is the piece of my code for dynamic theming.

Set global variable:

// app.js
  //------------- Global config -------------------
      $rootScope.global = {
        theme: {
          primary_color: '#28A249', //'#4a87ee',
          additional_color: '#248E44', //'#0c63ee',
          text_color: '#fff',
          logo: $localstorage.get('last_logo') || './img/default_logo_big.png'
        }
      }

Then use it in index.html

<!-- index.html -->
<style type="text/css">
        .logo-header {
            background: url("{{ global.theme.logo }}") no-repeat;
        }
 </style>
28

Thanks a lot crb, I’ll give a try ! :smile:

29

It works like a charm, thanks a lot !

30

Your welcome, i’m glad it helps you.

31

It’s not working on IOS via ionic view though… Is it because of ionic view or IOS is not supporting dynamic css allocation?

32

Hi All,

My question might be slightly off topic but it seemed appropriate place to post it.

I’m trying to place background image on the ionic card. Can anyone please let me know if this is possible and how would I achieve that.

33

Find and fix solution to build in ios if you customice sass:

First, in url remove “/” for url() and second the class only works fine…

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>


    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">
    <style>
       .scroll-bg {
        background: url('img/bg.jpg') no-repeat top center fixed !important;
        background-size: cover !important;
      }
    </style>   

    
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    
  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>
</html>
34

I have a question that when keyborad is shown, the background image will move. Could you help me? Thx.

35

I have the same problem, is working fine on iphone, but on an android device every time the keyboard shown it resize my background image. anybody help?

36

I have try this but no successful result comes…

37

How i can achive that … very tricky