Languages

Menu
Sites
Language
Transparent background for own watch clock app (Gear2)

Is there any way to set up a transparent background for my clock application widget?
Or maybe there is a way to obtain current background image path?

Edited by: A M on 22 May, 2014
List

Responses

10 Replies
czh

workspace\{app name}\css\style.css

.canvas {
    position: absolute;
    background: rgba(0,0,0,0);
    width: 320px;
    height: 320px
}
A M

tried, doesn't work, background is black.

I'm looking a way to set my app bg transparent to get system wallpaper visible under my app.

Slawek Kowalski

Set z-index property. Default value is 'auto' and it gets value from its parent. Html body value is 0. Try to set 1, 10 or even 1000 if need.

.canvas {
    position: absolute;
    background: rgba(0,0,0,0);
    width: 320px;
    height: 320px;
    z-index: 100;
}

 

A M

even with 1000 bg is still black...

czh

background background: rgba(0,0,0,0.6); background: rgba(0,0,0,0);

A M

cool. but where is an error?

index.html

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="description" content="Example" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <canvas class="canvas"></canvas>
</body>
</html>

 

style.css

* {
    margin: 0;
    padding: 0
}

h1 {
    font-size: 1.4em;
    margin: 10px 0 20px 10px;
    color: #6587ac;
}

.canvas {
    position: absolute;
    background: rgba(0,0,0,0);
    width: 320px;
    height: 320px;
    z-index: 1000;
}

 

A M

could you share an example project without additional functionality which demonstate transparency? or review provided code above with giving an advice

Slawek Kowalski

Try to set z-index for body

body {
  z-index: 100;
}

 

A M

nothing changes with code above and setting z-index for body

Michał

Hi, any updates about method how to make our watch faces transparent?