Contact us: +61 8 8226 8800

Department for Communities and Social Inclusion

Images styling

Make image full width 

class:

full-width

method:

  1. select image
  2. make sure image is selected and not surrounding markup by clicking on the word "image"
  3. click the class button
  4. type "full-width" in the Class area
  5. click Apply Changes

In page Banner Header

example:

description:

In-page banner images should have the following dimensions:

Dimensions: 1250 x 75 pixels

When including a graphic image on the top of a content page the image needs to respond to the width of the device being used. To stop the image overflowing you need to apply a class to the element that contains the image.

Note -

  • apply the class to the containing <p>, <div> or <span> tag, NOT the <img> tag itself.
  • the image should have NO size information specified. The image size will be controlled by its containing element.

class:

inpageBanner

method:

  1. select image
  2. make sure containing element is selected and not the image itself by clicking on the word PRIOR to the "img "
  3. click the class button
  4. type "inpageBanner " in the Class area
  5. click Apply Changes

 ""

Border styling

example:

description:

When including a graphic image you may wish to add a border.

A border can also be used around other page elements such as paragraphs, headings, tables etc.

The standard border styles are as follows.

class:

no border

border-1

border-2

border-3

border-4

method:

  1. select image
  2. make sure image element is selected by clicking on the word "img"
  3. click the class button
  4. type the class name of the border you wish to use ie: "border-4" in the Class area
  5. click Apply

NB: You can include a border class along with others. eg: "full-width border-3" would apply the full-width class and the border-3 class styles.

State Government of South Australia © Copyright DCSI .

Provided by:
Department for Communities and Social Inclusion
URL:
http://dcsi.sa.gov.au/guides/images-styling
Last Updated:
28 Oct 2016
Printed on:
13 Dec 2017
The DCSI website is licensed under a Creative Commons Attribution 3.0 Australia Licence. © Copyright 2016