Creating Responsive CSS Images

Use CSS generated from Sass media query variables and responsive queries to use a different, larger image when the screen width changes from small to large.

The code below shows the markup that defines the image. In this example, bulletlist is a CSS class generated from the Sass responsive variables and media queries.

<div role="img" class="oj-icon bulletlist" title="bulleted list image"></div>

The following image shows the bulletlist CSS class. When the screen is small or medium size, the icon_small.png image loads. When the screen increases to large or larger, or to print, the icon.png loads instead.

The Oracle JET Cookbook includes the Sass variables and queries used to generate the bulletlist CSS class. You can also find a Sass mixin that makes generating the CSS easier, but you are not required to use SCSS to create responsive CSS images.

In addition, the Oracle JET Cookbook includes examples that show high resolution images, sprites, button images, and more. For details, see Responsive CSS Images.

Note:

You can also use responsive JavaScript to change the images based on screen size. For details, see Creating Responsive Images.