Styling images and backgrounds
Often, we want to adjust the background of some element or modify an image.... This page will cover exactly that!
Images
This section of the document covers controlling the styling of an image, affecting how the image then displays in the browser.
Something we may have come across in the past is controlling the height and width of an image using attributes on the HTML element, like the following:
<img src="" alt="" width="200" height="200">- Although this does change the height and width of the image, it is now fixed and can only be modified by modifying the HTML itself... Time for some CSS!
The size of an image is easily manipulated using CSS using the width and height properties:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dicta mollitia corrupti reiciendis beatae. Deleniti amet maiores nesciunt corporis tenetur.
In this example, the original image is 300px x 300px, using CSS we have reduced the image to 1/3 of its original size by specifying both a height and width. This could actually be considered bad practice though, that is setting both the width and height unless you know aspect ratio and the sizes always adhere to that. If the image is taller than it is wide, or vice versa, it is important to only adjust the width of the image; the height will then be automatically calculated based on the original size of the image, thus retaining its original aspect ratio.
Styling an image
As an img is a HTML element, it is also subject to the rules of the box model. This allows for us to use the border property to our advantage:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dicta mollitia corrupti reiciendis beatae. Deleniti amet maiores nesciunt corporis tenetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error debitis culpa velit temporibus quam expedita vero omnis, dicta ex labore ratione hic ad ipsum distinctio sint quo nobis ipsam eius quidem nostrum magni reprehenderit, veritatis assumenda pariatur. Esse, sed vitae.
By applying a simple dashed border and small border-radius, we can give an image more personality; making it more appealing to the viewer. A box-shadow was also used to illustrate that their are styling options beyond just the generic box-model for images. The image only had its width set this time as well, thus helping it to retain its original aspect ratio - this was done as the image is 300x150 pixels in size.
Background colours and images
Background colours
The background colour of an element affects the content and padding areas, it can be set using the background-color property:
This example set the background colour of a 200x200px div to the hexadecimal value #FF00AA.
Types of background colour (colour keywords)
There are various units of measurement available for setting the background colour, the most basic are the colour keywords and hexadecimal notation. The colour keywords are represented by simply typing the name of a colour:
selector {
background-color: red;
}There are 140 colour names supported by modern browsers, find a list of them here.
Types of background colour (Hexadecimal notation)
The Hexadecimal notation is a base-16 measurement, meaning instead of their being just the 10 values (0-9) of the decimal notation (base-10), there are an additional 6. The first 10 values are the numbers 0-9, with the next 6, 10-15, being represented as A-F. The Hexadecimal notation for supplying a colours takes the form:
selector {
background-color: #RRGGBB;
}RRare the two values for specifying the shade of redGGare the two values for specifying the shade of greenBBare the two values for specifying the shade of blue
The colour black is represented by the hex value of #000000 whilst the colour white is represented by #FFFFFF. Pure red would be #FF0000,
pure green would be #00FF00 and pure blue would be #0000FF.
Types of background colour (RGB and RGBA)
CSS allows for a colour to be specified using the rgb(red, green, blue) and rgba(red, green, blue, alpha) formulas. The
red, green and blue positions accept a value in the range 0-255:
Black: rgb(0,0,0)
Red: rgb(255,0,0)
The rgba formula also accepts an alpha channel, a value between 0.0 and 1.0, which represents the transparency/opacity of a colour. 0.0 represents
full transparency, 1.0 represents no transparency:
Half transparent black: rgba(0, 0, 0, 0.5)
Mild transparent red: rgba(255, 0, 0, 0.8)
Images with CSS
Sometimes, we require an image that is purely decorative; that is, it does not contribute to the content of the page in a meaningful way and has no alt
text. We can include images using the background-image CSS property:
Some text content pushed down with padding.
In the above example, a placeholder image of size 300x150px was inserted into a 300x300px div. The height has to be set in this case or the image won't appear.
Styling background images
There are various properties available for styling backgrounds, these include:
background-repeat-
Used to specify whether a background image should be repeated across its container. Values include:
no-repeat: Don't repeat the image.repeat-x: Repeat the image on the horizontal axis.repeat-y: Repeat the image on the vertical axis.
background-size-
Used to specify the size of an image:
auto: The default size of the imagewidth height: The width and height of the image, i.e.,background-size: 100px 100pxcover: Scales the image to the size of its container, clips overflowing parts of the image
background-position- Specifies the position of the background image:
top,left,bottom,right: Specifies the side of a container to place the image onx% y%: Percentage along the horizontal axis and vertical axis respectively, top-left is the origin at0% 0%edge offset: Allows specifying a side, or multiple sides, alongside an offset, i.e.,top 50% left 50%center: Centres the image in the container.
The following example demonstrates some of these properties:
This is the box model, wohooo!
This example demonstrates using the background-repeat and background-size properties to control the appearance of the image. Some
text was also centered onto the image, this is common when including a hero image for a page.
The following example demonstrates centering an image using the background-position property:
Some text placed here