LP6 Style Guide: Section with Background Image page Template = lp6-docs

Sections

Next: Usage ›

.bg-primary--full

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-secondary--full

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-tertiary--full

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-primary

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-secondary

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-tertiary

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-sec-dark

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-sec-medium

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-sec-light

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-sec-white

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-page

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-main

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-cloud

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-fog

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-steam

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

Usage

‹ Previous: Overview | Next: Modifiers ›

Note: Background-image sections interact with Flexbox styles. This allows for completely custom breakpoints on the fly.

Mobile Image Optimizations

Image sizing and positioning can be optimized in-page with css overrides. You can control the min-height, position, order, or display. See modifiers below.lp

HTML Snippet

				
<section class="bg-panel bg-primary--full flex one two-800 three-1200">
	<div class="panel-content two-third-1200">
		<h3 id="bg-primary--full">.bg-primary--full</h3>
		<p>Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.</p>
	</div>
	<div class="panel-image third-1200" style="background-image: url(/common/images/banners/graduation-overview-test-amu.jpg); background-size: cover; background-position: 80% 0;"></div>
</section>

Modifiers

‹ Previous: Usage

Modifiers are extra classes used to modify the appearance, alignment, size, behavior etc. of standard component styles.

Name Usage/Description CSS Example
min-height

You can apply a min-height to the .panel-image class to control the image sizing for mobile, full-width breakpoints. This interacts with the flex layout so you'd set the media query according to the in-page breakpoint. See below.

 
@media only screen and (max-width: 700px) {
	.panel-image {
	  min-height: 300px;
	}
}
background-position

You can apply a custom background-position to the .panel-image class to control the image positioning (focal point) for breakpoints. This interacts with the flex layout so you'd set the media query according to the in-page breakpoint. See below.

 
@media only screen and (min-width: 1000px) {
	.panel-image {
	  background-position: 50% 50%;
		/* center center */
	}
}
order

You can apply a custom order to the .panel-image class to control the flex order for any breakpoints. This interacts with the flex layout so you'd set the media query according to the in-page breakpoint. See below.

 
@media only screen and (max-width: 700px) {
	.panel-image {
	  order: -1;
		/* moves image before content in <700px screens */
	}
}
display

You can apply a custom display to the .panel-image class to hide the image for any breakpoints. This interacts with the flex layout so you'd set the media query according to the in-page breakpoint. See below.

 
@media only screen and (max-width: 700px) {
	.panel-image {
	  display: none;
		/* hides image in <700px screens */
	}
}