HABPanel image overlay

Apps & Services HABPanel
,
1

Hi Guys,
i try to overlay two images, one “background” image and one semi-transparent image above it.
I could get it working, but i am not satisfied with it, cause i have to change the size manually when i resize the widget.
So please see below my coding.
The best option would be something like the original image widget, having the image centered and sized to the maximum of the available widget space.

Any ideas?

widget-sample-images
widget-sample-images.png930×313 48.1 KB

My code of the widget with both pictures:

<style>
	.backimage
	{
        top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  position:absolute
	}
	.coverimage
	{
      top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  position:absolute
	}

</style>




	<div >
		<img src="/static/test/background.jpg" class="backimage" height="158" width="158"/>
		<img src="/static/test/cover.png" class="coverimage" height="158" width="158" />
	</div>

Thanks
Andreas

2

Change the size to % of parent

style:

.parent { width: something; position: relative; }
.child { width: 100%; }

html:

<div class="parent">
  <div class="child"></div>
</div>
3

@luckymallari Thanks, sometimes it’s so simply :slight_smile: Working great!

Cheers
Andi

4

@aksnet note that you can also add border to your image.

.coverimage {
    border: 5px solid #fff;
}
5

Hi, very cool! Thanks. Just tested it. Didn’t know this would be possible.

Andi

6

For further info check out these sites:
http://www.cssbasics.com/

https://www.w3schools.com/css/css_intro.asp

CSS is super fun :wink:

1 Like