Introduction
Coding a layout that brings together content successfully can be difficult. One great way to add a creative touch is by using images as your background — or altering the background in general. This may seem like a technical job, but coding allows for maximum flexibility in the task. Before we begin, it’s important to note that you do not have to use one full size photo as your background, nor do you need to use a jpg image. You can create any patterned background you desire, and you can even actually draw an image to use – all using just coding language!
Let’s go over these different background image options and how to code them in CSS.
Background Image
To code in a jpg, png, tif, or gif as a background image in the CSS stylesheet, you’ll need to reference the element tag and use the attribute “background-image”. It should look just like this:
div.name
{ background-image: url(“image-name.jpg”); }
Adding an Opaque Color
It is likely that if your website background is an image you’ll be wanting to place text over top. Unfortunately, a busy background can sometimes make the text difficult to read. A great way to solve this issue is by adding an opaque color on top of the image, subduing the details and allowing the text to stand out against the background. To implement the opaque color, simply add the colour and opacity into your coding line. The example below uses a color type called rgba, followed by ‘0,255,0’ which denotes the hue and ‘0.2’ which denotes the opacity. The opacity must sit within the opacity scale, between 0 and 1.
div.name
{ background-color: rgba(0,255,0,0.2); }
Important Attributes
Another thing to consider when using an image as a background is “background-size” which controls how the image covers the designated space. Your options are auto, specified measurement, cover, or contain. The two most popular options of these four are cover and contain. ‘Cover’ fills the entire designated space, but maintains the images original sizing. This means that parts of the image may be cropped out if the dimensions of the page and image differ. The ‘contain’ option ensure that the entire image is visible, but again maintains the images dimensions potentially resulting in empty space left on the page. If this is the case, you can center the image to make the image sizing more intentional. Another important attribute is “background-repeat” which controls whether or not the image will repeat in other designated spaces on the site. It’s safe to have this in the CSS code when working with images.
Sticking to the Rainbow
You can also use flat plain colors as backgrounds. For this, reference the element tag and the attribute “background-color”. You will want to use the correct colour names in your coding. If you want a specific color but aren’t sure exactly how to name or describe it, you can visually pick a colour and then include the hex code. There are lots of other great resources for determining colour, including this exhaustive colour palette that will boggle your mind! Below is an example that will create a “FireBrick” red background:
div.name
{ background-color: #B22222 }
Patterned Backgrounds
Beyond dropping in a color or a single image, you can get really creative and actually create a pattern using solely CSS coding! One great benefit of using a patterned background rather than an image is that it speeds up the loading process significantly. So if you want something more dynamic than a block colour background, but don’t need a busy image, patterns are a great way to go! You can find lots of great pre-developed patterns. Once you find a pattern that suits your needs, simply copy/paste the patterns CSS code into the body reference or the element tag reference of your choosing. Here is an example:
div.name
{ background:
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #EC173A; }
The great thing about using code that’s already been prepared is that it is still fully customizable. In the above example the colour and size of the prepared pattern weren’t to my liking, so I changed them. You as the coder can play with the measurements and colors to your liking, creating a background that is unique to you! Don’t you love coding?
Conclusion
Creating a sophisticated site can take a lot of effort. There is a lot to know and always more to learn when it comes to coding. Thankfully, implementing image, colour, and patterned backgrounds is a breeze! I hope this article will help you to create the perfect background for your next coding project. Happy building!