Ticker - HTML Background image is not full screen


#1

Trying to accomplish Data-set workflow, and display the dataset feed in nice looking HTML
i have composed a short HTML with CSS, and so far it display all the elements.

however, for some reason, the background (1920x1080) is not showing in ful screen, despite the layout is 1920x1080, the window with the ticker is also 1920x1080

here is the html code, and below a screenshot from xibo cms, the green area is the BG…

tried also using llarger image, and expanding the bg (112.jpg) larger then 1080px height…

any thoughts?

<style type="text/css">body{
        margin: 0px;
        padding: 0px;
        width: 1920px;
        height: 1080px;
        background-image: url("112.jpg");
      }
      .title{position: absolute; right: 10px; top:200px}
      .footer_table{position: absolute; bottom: 0px;} 
      .box{background-image: url(EventUnit.png); width:460px; height:555px; direction:rtl;}
      .lamp{position: absolute; left: -150px; bottom:20px; z-index: 10;}
      .box_title {direction: rtl;}
      .box_1{position: absolute; bottom:100px;; right: 750px; width:200px;}
      .box_2{position: absolute; bottom:100px;; right: 450px; width:200px;}
      .box_3{position: absolute; bottom:100px;; right: 150px; width:200px;}
      .box_event_details{background-image: url("102.png");
	      display:block;
     position:relative;
     z-index: 10;
    background-repeat:no-repeat;
    background-size:50% 50%;
    height:433px;
    width:433px;
      }
</style>
<div class="footer_table"><img src="112.jpg" style="width: 1920px; height: 1200px;" /></div>

<div class="title"><img src="103.png" style="width: 980px; height: 158px;" /></div>

<div class="lamp"><img src="106.png" style="width: 574px; height: 912px;" /></div>

<div class="box box_1">
<div class="box_title">אירוע מספר 1<br />
> שם אירוע</div>

<div class="box_event_details">
<div class="event_title">&nbsp;</div>

<div class="event_image">&nbsp;</div>

<div class="event_text">&nbsp;</div>
</div>
</div>

<div class="box box_2">
<div class="box_title">אירוע מספר 2<br />
> שם אירוע</div>

<div class="box_event_details">
<div class="event_title">&nbsp;</div>

<div class="event_image">&nbsp;</div>

<div class="event_text">&nbsp;</div>
</div>
</div>

<div class="box box_3">
<div class="box_title">אירוע מספר 3<br />
> שם אירוע</div>

<div class="box_event_details">
<div class="event_title">&nbsp;</div>

<div class="event_image">&nbsp;</div>

<div class="event_text">&nbsp;</div>
</div>
</div>


#2

is the background image also 1920x1080?

If you set it as a layout background, does that work better then?

If you want to, you can send me your layout with the dataSet via private message and I can take a look at it.


#3

Yes, BG image is 1920x1080.
Setting the same bg file in layout Background property cover the entire screen.

sending the layout and dataset shortly…


#4

I was able to overcome this by enlarging the image and the CSS width and using the optional stylesheet …however im facing new issue that happens only on Android player (1.8 B102)
CSS animation seems to apply to wrong HTML classes.

I have .footer image, static.
and it gets animation from .lamp. inside the CSS

compared it with windows client 1.7.9 where everything seems to be fine.

Exported layout
HTML:

 
<div class="title"><img src="103.png" /></div>

<div class="lamp"><img src="106.png" /></div>

<div class="box box_1">
<div class="box_title">ירוע מספר 1<br />
שם אירוע</div>

<div class="box_event_details">
<div class="event_title">[כותרת אירוע 1|1]</div>

<div class="event_image1">[תמונה אירוע 1|5]</div>

<div class="event_text">&nbsp;</div>
</div>
</div>

<div class="box box_2">
<div class="box_title">אירוע מספר 2<br />
שם אירוע</div>

<div class="box_event_details">
<div class="event_title">[כותרת אירוע 2|2]</div>

<div class="event_image">[תמונה אירוע 2|6]</div>

<div class="event_text">&nbsp;</div>
</div>
</div>

<div class="box box_3">
<div class="box_title">אירוע מספר 3<br />
שם אירוע</div>

<div class="box_event_details">
<div class="event_title">[כותרת אירוע 3|4]</div>

<div class="event_image">[תמונה אירוע 3|13]</div>

<div class="event_text">&nbsp;</div>
</div>
</div>

<div class="footer">&nbsp;</div>

optonal Stylesheet

.event_image img {width: 456px; height: 330px; padding-top: 50px; background-size: cover;}
.event_image1 img {width: 456px; height: 330px; padding-top: 71px; background-size: cover;}
.lamp{width: 574px; height: 912px;background-image: url(106.png); background-size: cover; position: absolute; left: -100px; bottom: 20px; z-index: 10;}
 
/*.background {
  width: 2040px;
  height: 1200px;
  padding: 0px;
  background-image: url(141.png);
  background-size: cover;
  background-size:2040px 1200px
}*/
.title {position: absolute; left: 980px; bottom:850px;}

      .box_1{position: absolute; bottom:-25px; right: -120px; width:660px;}
      .box_2{position: absolute; bottom:-25px; right: 430px; width:660px;}
      .box_3{position: absolute; bottom:-25px; right: 970px; width:660px;}
      .box_event_details{background-image: url("102.png");
      display:block;
      position:relative;
      z-index: 10;
      background-repeat:no-repeat;
      background-size:100% 100%;
      height: 590px;
      width: 510px;}
      .footer{position: absolute; bottom: -120px; width: 2040px;background-image: url(147.png); background-size: cover; z-index: 1; height:212px; animation-name: footer_static;}
@keyframes footer_static {
  from {
    margin-left: 0%; 
  }

  to {
    margin-left: 0%;
  }
}

.box_title {direction: rtl;     margin-right: 220px; margin-bottom: 10px;}

.title {
  animation-duration: 3s;
  animation-name: title_slidein;
}

@keyframes title_slidein {
  from {
    margin-left: 100%; 
  }

  to {
    margin-left: 0%;
  }
}

.lamp{
	  animation-duration: 3s;
	  animation-name: lamp_slidein;
}

@keyframes lamp_slidein{
  from {
    left: -1000px; 
  }

  to {
    left: -100px;
  }
}


.box_1 .box_event_details{
	animation-duration: 3s;
	animation-name: box_slidein1;
}

.box_2 .box_event_details{
	animation-duration: 3s;
	animation-name: box_slidein2;
}

.box_3 .box_event_details{
	animation-duration: 3s;
	animation-name: box_slidein3;
}


@keyframes box_slidein3{
  from {
    right: -3000px; 
  }

  to {
    right: 0px;
  }
}

@keyframes box_slidein2{
  from {
    right: -2000px; 
  }

  to {
    right: 0px;
  }
}

@keyframes box_slidein1{
  from {
    right: -1000px; 
  }

  to {
    right: 0px;
  }
}

.box_1 .box_title, .box_2 .box_title, .box_3 .box_title{
	animation-duration: 3s;
	animation-name: box_title_slideup;
	animation-fill-mode:forwards;
	visibility: hidden;
}

.box_1 .box_title{
	animation-delay: 1s;
}

.box_2 .box_title{
	animation-delay: 1.5s;
}

.box_3 .box_title{
	animation-delay: 2s;
}

@keyframes box_title_slideup{
  from {
    margin-bottom:  -30%; 
  }

  to {
    margin-bottom:: 0%;
    visibility: visible;
  }
}