How to use teaser image as background image

inxeption_dev

I am trying to loop through the pagelist and display the teaser image as background image. Below is my code. The problem with this is I have to define a width and in my case, I want to use the original width or height. How can I accomplish this?

<li>
			<@ with @{ imageTeaser | def('*.jpg, *.jpeg, *.png, *.gif') } { 
						width: 840
			} @>
			<a 
			href="@{ url }" 
			class="buzz-category-card"
			style="background-image: url('@{ :fileResized }')"
			>
				<span class="">
					@{ title }
				</span>
				<span class="">
					@{ teaser }
				</span>
				<span class="">
					<@ ../../snippets/date.php @>
				</span>
			</a>
			<@ end @>
		</li>

mad

inxeption_dev

Hi,

you don't have to define a width in a with statement. That is optional. If you leave out the width, the file is not resized. The best would be to completely skip the options and then just use the @{ :file } variable instead.

Hope that helps.

inxeption_dev

mad Great, this worked like a charm. Still new to this but I've made a prototype and convinced my boss that this should be our cms system to be used for the marketing site. It's really easy to use, just need more support.

mad

inxeption_dev

Cool! ?