Fullscreen Sections
Fullscreen Sections Classes
Fullscreen sections are sections that will span the full height of the device window. They can be used as stand alone sections to showcase something specific or combined into multiple sections to showcase a series of images or elements.
Fullscreen sections have a number of helper classes for setting background position, background size and and overlay color. Below is an example of each class:
Fixed Background
By default background images that are added to a fullscreen section have an absolute position, which means they scroll with the content. To give them a fixed position, we add the .background-fixed class to the fullscreen section wrapper.
Example
Background Size
By default background images are not resized, but we can force the image to cover the full width and height of the fullscreen section by adding the .background-cover class to the fullscreen section wrapper.
Example
Alternatively, if we we want to contain our background image within its wrapper we can do so by adding the .background-contain class to the fullscreen section wrapper.
Example
No Overlay
Fullscreen content, by default, is given a semi transparent background color to ensure that it stands out irregardless of the image. Target .fullscreen-section.no-overlay .fullscreen-inner to change overlay color. We can remove the background color by adding the .no-overlay class to the fullscreen section wrapper.
With Overlay
Without Overlay
Example
Navigation
Fullscreen sections by default have no navigation. The script will automatically create section navigation if we wrap all fullscreen sections in a wrapper with the class .fullscreen-sections-wrapper and give each fullscreen section a unique id.
Example
Hide Navigation New
There may be situations when we want to use multiple fullscreen sections throughout a page layout but without section navigation. We can prevent the script from adding any section navigation by adding the .no-navigation class to the .fullscreen-sections-wrapper.
Example
Scaling Fullscreen Sections New
By default, fullscreen sections scale according to the device window and any content within a fullscreen section will always overlay the background image. This may be conveniant when the text requires more focus than the background image itself. However, on smaller devices the text may overflow it's container; in situations like these we have a few tools at our disposal to make sure the content flows nicely from top to bottom.
1. Content Below
We can force the fullscreen section content below the fullscreen image on mobile so that it does not overlow its container. This is done by adding the .content-below-on-mobile class to the .fullscreen-section wrapper.
Content Overlay
Content Below
Example
2. Scale Image
To create a more harmonious flow of content we can also scale the fullscreen image so that it is fully visible much like a thumbnail would be. We force the script to scale the background image by specifying the original background image width and height. This is specified using the attributes data-width and data-height which are added to the .fullscreen-section wrapper.
Example
3. Minimum Height
There may be situations where we would like to provide a minimum height for the scaled background image. This is particularly useful when the .background-contain class is used or when a portrait image is used. To stop the script from scaling beyond a certain height we simply add the data-min-height to the .fullscreen-section wrapper.
Example
Note: There is no need to add the .content-below-on-mobile class if height and width are specified using the width and height data attributes. The class is automatically added by the script.
CSS For Retina Displays
We suggest creating specific classes for each background image that you add to each fullscreen section as shown in the above example (i.e. bkg-image-1, bkg-image-2 etc.). The main reason for this is that you can then server a higher resolution images for retina displays by targeting these classes using the media queries below. Note: The CSS targeting below is just an example; replace with the classes you have created.
.bkg-image-1{
background-image:url(../images/slider/bkg-image-1.jpg);
}
.bkg-image-2{
background-image:url(../images/slider/bkg-image-2.jpg);
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.bkg-image-1{
background-image:url(../images/slider/[email protected]);
}
.bkg-image-2{
background-image:url(../images/slider/[email protected]);
}
}
Fullscreen Content
Fullscreen section content can be positioned in a number of ways. Use a combination of column classes, text alignment classes such as .left, .center, or .right to align text horizontally, and .v-align-bottom or .v-align-top to vertically align content. Note: Content is by default center aligned and vertically aligned middle. For more information on helper classes please visit this section of the Framwork Documentation. The above mentioned helper classes should be added to the .fullscreen-inner wrapper as shown below.
Example