{% load wagtailimages_tags wagtailcore_tags %}

{% if not self.full_width %}
<div class="container">
{% endif %}

{% image self.background_image.image max-2000x2000 as background_image %}
<div class="hero-bg
	{% if self.full_width and self.full_height %}fill-viewport{% endif %}
	{% if self.is_parallax %}parallax{% endif %}
	{% if self.tile_image %}tile{% endif %}
	{% if self.layer_color %}layer-background{% endif %}
	{% if self.settings.custom_css_class %}
		{{self.settings.custom_css_class}}
	{% endif %}"
	style="
		{% if self.background_color %}
			background-color: {{self.background_color}};
		{% endif %}
	   {% if background_image %}
	   		background-image: url({{background_image.url}});
	   	{% endif %}"
	{% if self.settings.custom_id %}
		id="{{self.settings.custom_id}}"
	{% endif %}
	 >
	{% if self.layer_color %}
		<div class='layer' style='background-color: {{ self.layer_color }}; z-index: -1;'></div>
	{% endif %}
	<div class="hero-fg"
		style="{% if self.foreground_color %}color:{{self.foreground_color}};{% endif %}">
		{{self.content}}
	</div>
</div>

{% if not self.full_width %}
</div>
{% endif %}