HTML producer and background image

#1
I've been playing around with the 2.1 beta (lots of nice stuff!) and the HTML producer. With simple HTML showing a background image, that image appears rolled up the screen maybe 20% so that what should be at the top is down at the bottom. Sort of like this (a screen shot would be difficult from the SDI monitor....)--
line 2
line 3
line 4
line 1

Code: Select all

<style>body { background-image: url("bars.jpg"); }</style><body></body>
The image is OK when played by itself ('play 1-1 bars'). This is NTSC and the bars image is 640x480. I've tried this with several other images, including a 720x480 file, and no difference. Have not tried a 720x486 image.

Is this a user error or a server error? :) (Server 2.1.0.3437 dc2e94b Beta 2)

z!

Re: HTML producer and background image

#2
What happens if you don't put the image as a background, but as an image tag?

Code: Select all

<style>
    HTML, BODY {
	Margin:0;  /* Use all available space */
	Padding:0;  /* Use all available space */
	Background:transparent;  /* The HTML consumer actually makes your background transparent by default, unless a color or image is specified - but this might be usefull when debugging in browsers */
	Overflow:hidden;	 /* Hide any overflowing elements - to disable scollbars */
    }
    img {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
    }
</style>
<body> 
    <img src="bars.jpg" />
</body>
sublan.tv - Wir teilen Begeisterung

Re: HTML producer and background image

#3
Could you enable the screen producer and take a screenshot of that?

I believe that in html background images repeat by default, so it sounds like it could be that the page is too tall for caspar causing the top being pushed outside and the background gets repeated to fill the whole page. You can turn repeating off with the css

Code: Select all

background-repeat: none
, which if I am right will leave a black bar along the bottom instead

Re: HTML producer and background image

#4
There is a simple command in the official client to get a snapshot of the output:
Grab1.png
By the way: A little bit further down there is the "File Recorder" that does the same, but records a video. Good for giving feedback to a client, for instance.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests

Re: HTML producer and background image

#6
I'm not really familiar with the way the client works, but a screen grab of the "live" window did the trick. This shows the artifact for a 640x480 image-
Capture.PNG
Capture.PNG (25.16 KiB) Viewed 691 times
In order of suggestion--
img src tag w/ example code -- output looks correct
background-repeat: none -- does not help
background-size: cover; -- output looks correct

I did mention the image sizes in my original message, but there is the question of how this producer deals with what should be non-square pixels (720x480 image for NTSC); I don't think it does the right thing. Since there are two usable options for writing the HTML, I can get on with things although there will be some experimentation with grids and circles to see what's being stretched and which way.

Thanks,

z!

Re: HTML producer and background image

#7
non square pixel resolutions have extra horizontal pixels.

whether or not this is the "right" thing is a different discussion. for one, html doesn't work with non square pixels out of the box at all. but do note that setting Caspar to 4:3 SD will allow you to work with non square pixels in html.
CasparCG enthusiast and broadcast geek

Re: HTML producer and background image

#8
In NTSC Caspar uses 720x486 pixels. That is non-square in any aspect ratio. So to run correct the layout must be 648x486 for 4:3 and 864x486 for 16:9. So for 16:9 add the following CSS style:

Code: Select all

  <style>
    body {
      height: 486px;
      width: 864px;
      overflow: hidden;
    }
  </style>
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests