Full width image module
The Full Width Image Module can be used for a variety of advanced design purposes.
The module has the same text-in-a-box features as the equivalent Jumbotron modules, but the functionality in regards to images differs on these areas:
1: The image is uploaded 1:1 and it does not scale like in the Jumbotron modules. The height of an image is not scaled, and the width of the image is scaled according to the width of the browser window.
2: When uploading an image (or a graphics file), the same options as on page settings apply. This means that an image/pattern can be repeated, stretched and placed differently.
The features gives unique creative opportunities for differentiating the design on a mono site.
Note: The recommended image size of jumbotron background images is 2000px. Everything above and below will be scaled to 2000px.
Please see below for examples.
The image width is cut if the browser window is smaller than the image.
Framing a page
It is simple to frame a page or a site using the Full Width Image module. In the example below you can see a D4 skin where the module is used to frame selected content in a grey box.
Here's how you do it:
1: Design a graphics file [B] which creates the middle and the sides of the grey box. Then upload the file as background in page settings and repeat it vertically.
2: Define a top and bottom graphics file [A] + [B] and place them with the new module at the top and bottom of the page.
3: In order to have the module stretch to the bottom of the page, insert a CSS-snippet [D]. Click here to see how.
4: Add content modules in between the top and bottom full width image modules. Because the center graphics file is added as background on the page, the box will automatically scale depending on the amount of content.
Please note, that the box must be created in a width, so that the sides of the box are cut in tablet-versions of the site.
Three graphics files are all it takes to frame your page content.
Making a box
1. With the same graphics files as above, you may create a box in order to enhance specific content on a page [A, C].
2. Place the center graphics file in the full width image module and repeat it vertically. You can now wirte the text on top [B].
You can define the height of the module in "Module settings". This is especially helpful if you want to use a pattern as background.
Background color of the module is also defined in "Module settings".
Top image and frame
How to build a page with a top image with an overlapping box:
1: In page settings, upload a background graphics file that consists of a top image + the middle part of the box [A]. The image must be so high that content can easily be added without having to adjust the background image.
2: Upload a graphics file for the bottom of the box using the full width image module [B].
3. Add the CSS snippet that ensures that the module goes all the way to the footer [C].
You may now add the content modules needed on the page.
Use borders to underline the visual identity your are trying to achieve on your site.
The example below shows a romantic border design, used to frame a gallery module. It is designed from a black, transparent PNG-file with 60% opasity. The background color of the gallery module is also black with 60% opasity.
Borders can also be used at the top and bottom of a page.
How to create a border:
1: Create a graphics file for your top border design [A].
2. Upload it using the full width image module.
3. Repeat step one but for the bottom border [B].