Background Overlay

Can add an overlay image to the background image element using CSS?

<productBundleTemplate>
  <background >
  <img src="http://www.cox7.com/wp-content/uploads//2015/09/091115070929DesertRidge_vs_Chandler_091015_PS.jpg" />
  </background>
</productBundleTemplate>


Looking at the syle docs I don't believe I can but I just wanted to double check. Preferably I would like to add a gradient with alpha over the images to darken them up so text is a bit more legable.

You can use the "tv-tint-color" style to provide an overlay on an image element:

<img src="http://www.cox7.com/wp-content/uploads//2015/09/091115070929DesertRidge_vs_Chandler_091015_PS.jpg" style="tv-tint-color: linear-gradient(top, 0.33, transparent, 0.66, rgba(255,255,255,0.7), rgba(255,255,255,1.0));" />

That method works for asset images but will not be picked up and rendered by the framework. Looking more at this I don't think you can stylize the main view background image with tv-tint-color.

You can apply style tv-img-treatment with value "uber" while applies gradient and darkens image

<img style="tv-img-treatment:uber;" src="http://www.cox7.com/wp-content/uploads//2015/09/091115070929DesertRidge_vs_Chandler_091015_PS.jpg" />

This "uber" effect on the background is really subtle, it could probably do with more emphasis or allow devs to put their own gradient on the background.

Would this be possible?


Also it would be nice if this was added to the TVML documentation as currently I couldnt find any reference to it.

Has anyone figured out any way to do this?


Using backgrounds look really great except that some of them make the text too hard to read. There really should be a way to either put an overlay or darken or adjust the alpha of the image itself (sourced from url) or apply some sort of haze backdrop to the text area.

Hey I have a related question regarding the <img> elements. Is there a possibility to set a common placeholder image for all <img> elements, before the actual image renders from the URL that is set to 'src'?


Thanks in advance!

I haven't tested this, but you can try this in your app delegate:


Note that unexpected parts of your UI may (or may not) rely on UIImageView. It's probably a bad idea.


UIImageView.appearance().backgroundColor = UIColor(patternImage: ...)

There is default placeholder that gets set, custom placeholders are not supported, please create bug report requesting the feature.

Background Overlay
 
 
Q