# Weather with Webcam

**URL:** https://community.xibo.org.uk/t/weather-with-webcam/25711
**Category:** User Stories and Project Showcase
**Created:** [September 7, 2021, 12:43pm UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711 "2021-09-07T12:43:50Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![heiko](https://community.xibo.org.uk/user_avatar/community.xibo.org.uk/heiko/32/4996_2.png) [@heiko](https://community.xibo.org.uk/u/heiko)
#### Post date: [September 7, 2021, 12:43pm UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711/1 "2021-09-07T12:43:50Z")

</div>

My example might be not very important, but I like ‘hidden features’ in Xibo as the one I did use here.

I made a weather page to show nearly all data from Open Weather. Then I realised, that I could use my own pictures as background, in the preset they were predefined according to the weather. The company I work for has a few webcams running, so I use the URLs from the webcam as background, and they are changing when the weather is changing.

 ![wetter-webcam](https://community.xibo.org.uk/uploads/default/original/2X/1/120cb54c1512932386b46ab58b0981c0716ae735.jpeg)

---

<div class="post-metadata">

### Author: ![aponkye](https://community.xibo.org.uk/letter_avatar_proxy/v4/letter/a/ed655f/32.png) [@aponkye](https://community.xibo.org.uk/u/aponkye)
#### Post date: [September 7, 2021, 3:43pm UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711/2 "2021-09-07T15:43:25Z")

</div>

wow…genius you! is open weather free to use?

---

<div class="post-metadata">

### Author: ![heiko](https://community.xibo.org.uk/user_avatar/community.xibo.org.uk/heiko/32/4996_2.png) [@heiko](https://community.xibo.org.uk/u/heiko)
#### Post date: [September 8, 2021, 6:41am UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711/3 "2021-09-08T06:41:42Z")

</div>

The genius is Xibo, I only use it 😉  
You can get a free API key from [Pricing - OpenWeatherMap](https://openweathermap.org/price)

---

<div class="post-metadata">

### Author: ![natasha](https://community.xibo.org.uk/user_avatar/community.xibo.org.uk/natasha/32/18270_2.png) [@natasha](https://community.xibo.org.uk/u/natasha)
#### Post date: [September 10, 2021, 11:55am UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711/4 "2021-09-10T11:55:41Z")

</div>

Great example, thank you for sharing 👍

---

<div class="post-metadata">

### Author: ![eduardo](https://community.xibo.org.uk/letter_avatar_proxy/v4/letter/e/6a8cbe/32.png) [@eduardo](https://community.xibo.org.uk/u/eduardo)
#### Post date: [September 16, 2021, 11:15pm UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711/5 "2021-09-16T23:15:11Z")

</div>

Nice, great work!  
Thank you for sharing.

---

<div class="post-metadata">

### Author: ![heiko](https://community.xibo.org.uk/user_avatar/community.xibo.org.uk/heiko/32/4996_2.png) [@heiko](https://community.xibo.org.uk/u/heiko)
#### Post date: [May 2, 2022, 12:37pm UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711/6 "2022-05-02T12:37:36Z")

</div>

Hello @natasha, I did the CMS update to 3.1.1 and now I do not find the possibility to use a URL as background picture in the new weather module.  
Is it no longer possible or do I just not realise where to find it?

---

<div class="post-metadata">

### Author: ![natasha](https://community.xibo.org.uk/user_avatar/community.xibo.org.uk/natasha/32/18270_2.png) [@natasha](https://community.xibo.org.uk/u/natasha)
#### Post date: [May 4, 2022, 10:15am UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711/7 "2022-05-04T10:15:59Z")

</div>

Hi, if you click on Templates, use the drop down to select your template and then scroll down further you should see the items that can be replaced:

 ![image](https://community.xibo.org.uk/uploads/default/original/2X/4/423e04b060cee245de4de34c5a93387d470c1356.png)

---

<div class="post-metadata">

### Author: ![heiko](https://community.xibo.org.uk/user_avatar/community.xibo.org.uk/heiko/32/4996_2.png) [@heiko](https://community.xibo.org.uk/u/heiko)
#### Post date: [May 4, 2022, 10:57am UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711/8 "2022-05-04T10:57:55Z")

</div>

Thank you for the answer. Yes, I can use pictures from the library there, but no URL from a webcam.  
Or is there a workaround for that case?

---

<div class="post-metadata">

### Author: ![natasha](https://community.xibo.org.uk/user_avatar/community.xibo.org.uk/natasha/32/18270_2.png) [@natasha](https://community.xibo.org.uk/u/natasha)
#### Post date: [May 16, 2022, 10:50am UTC](https://community.xibo.org.uk/t/weather-with-webcam/25711/9 "2022-05-16T10:50:36Z")

</div>

The intention is to use library media rather than image by URL as the images would not be stored locally on the Player and will break if the device goes offline. However, it is still possible using the options below:

To use the same image regardless of the weather, use the Background Image dropdown and set to None:

 ![image](https://community.xibo.org.uk/uploads/default/original/2X/b/b22fdd3c7e1919caadd3034cd86164ceaf9df26b.png)

Then add the following CSS:

```auto
#content {
    background-image: url("https://ceu.xibo.co.uk/mediarss/image1.jpg") !important;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}

```

Alternatively, you can override one or some of the conditions:

```auto
.bg-partly-cloudy-day {
    background-image: url("https://ceu.xibo.co.uk/mediarss/image1.jpg") !important;
}

```

(in both cases substituting the image URL for the URL to be used)
