Background image block

Designed for help the campaign/marketing events to be more effective on the web page and provides a strong visual performances on the desktop view. The large decorative image will be removed on the mobile and tablet view to provide a mobile-friendly experience.

Fluid width layout - the width of the component will be adjusted based on the parent div.

Edge to edge layout - the width of the component will be adjusted to touch the edge of the page regardless of the parent div.

Select a layout:

Select the content container width:

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Nulla elementum hendrerit arcu, eget placerat massa bibendum sed. Cras aliquam justo lectus. Phasellus ullamcorper tempus felis at cursus.

Donec mollis nisi sit amet dolor porttitor tempor. Phasellus at turpis magna. Morbi ac lorem ac nulla tempor sollicitudin. Fusce in commodo nisi, semper consequat lacus. Quisque vitae velit in sem fringilla porttitor et ac velit. Vestibulum aliquet volutpat eleifend. Proin congue lectus urna, vel luctus nibh sodales in. Nam ullamcorper volutpat lectus sit amet accumsan.

Code


<!-- 
    - Use the 'background-image-block' 
      A large decorative image (approaching the size of the browser) will be displayed on desktop view and removed on the mobile and tablet view.   
-->	
<div class="background-image-block {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right | bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }} {{ edge-to-edge }}" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );">	
	<div class="comp-body {{ lg | md }}">
		{{ Content }}
	</div>		
</div>