What a user sees on your webpage has a massive impact on both factors of use and experience for them. Setting the perfect background can be one part artistic know-how and another part technical savvy.
Within this brief CSS background image tutorial, you will see the latter in action. These concepts will help you get started on your own design path so you can focus on that perfect image to use in your HTML work.
Simple Syntax of Image Attaching
Setting up a background image for your page is very straightforward in both language and application.
Note: If you are not familiar with how to set up and link a CSS file to your HTML file, please take a look at the intro to CSS basics post here for a quick and easy tutorial.
In the example code below, you can see the CSS file. First, we note the HTML tag we want to work with. In this case, it is the HTML tag. Simply put, this will put our image in the background where the HTML resides.
Note: You can also use the body tag in this example. The use of the html tag is applied here as it helps to ensure the browser window height constraint is automatically taken in.
Next, you will notice the “url” setting. If you are not aware, “url” stands for uniform resource locator. Essentially, this tells the CSS file where the image you wish to use is located. This can be directed to a web address or a local file. In this example, we are using a locally sourced image titled “SampleImage.JPG”.
html {
background-image: url("SampleImage.JPG");
}
This will produce a background image on the HTML page as shown below.
Note: To better display the contents of the sample HTML, a div with the following CSS styling has been applied to the stylesheet. You can see the div as a white box with a red border on the page that contains the text “Hello World”.
div {
width: 200px;
border: 7px solid red;
padding: 20px;
margin: 120px;
background-color: white;
text-align: center;
}
From the image above, it is apparent just how easy it is to add an image to your page through the use of a CSS stylesheet. However, that’s not always the best option to work with. Depending on the image you have chosen or even the content of the page itself, you will need to apply fine-tuning to ensure that the display is not working in a negative way for the end-user.
Background Repeat options
When you apply a background image through a CSS file without any added options; the browser will automatically interpret that to mean the image should repeat itself in both vertical and horizontal positions across the page. You can make a choice to allow this in both directions or remove one or the other altogether. This is done via the “ background-repeat” property. In the example below, you can see that this property has been set with the value of “repeat-y”. This informs the browser that you only want the image repeated in the vertical direction.
html {
background-image: url("SampleImage.JPG");
background-repeat: repeat-y;
}
Adding this option will provide the following result to the page:
In the alternative, you can also have the image repeat in the horizontal position only by replacing the “repeat-y” with “repeat-x”. The result of this is displayed below.
Another value you can work with within the repeat property is to simply disallow the repeat action itself. This will place the image in the default position on the page keeping it fixed in place.
html {
background-image: url("SampleImage.JPG");
background-repeat: no-repeat;
}
The result of the value change is shown in the image below.
You can use all three values to judge how the background image will appear on the user’s device. In some cases, you can see where one option over the other will fit the page content in a clearer context of design.
You should always consider how the image itself will clash with the content and navigation of the page. Colors, position, and even visual depth could be variables that have an effect on the choice of image to use.
Background Image Positioning
As you can see from the image examples above, the values of repetition do not always leave the CSS background image in a useful state. In fact, it can leave it in a poorly implemented position that can adversely affect the user experience. Fortunately, there are options to change this allowing you control in that aspect as well.
The basic values allowed for the background-position are top, bottom, right, left, and center. These can be applied singular or in combination. For example, you could desire the background image to be centered on the page. Alternatively, you could also want the image to be set to the top-right of the page so as to not interfere with side-bar navigation designs. Take a look at the example below to see it applied.
html {
background-image: url("SampleImage.JPG");
background-repeat: no-repeat;
background-position: center;
}
As you can see, the image sits centered on the page. Now, with a change to the background-position to “left”, the image will be positioned as shown below.
html {
background-image: url("SampleImage.JPG");
background-repeat: no-repeat;
background-position: left;
}
Note: This is just the basics of positioning. Options for using percentages and length also exist for more detailed control of the image’s setting. For example, “background-position: 20% 40%” will direct the position based on the X and Y values applied.
Using Color Gradients as Image Backgrounds
If you don’t have an image that you want to apply, or simply need something more subtle for the page design, you have the option to create a gradient background as well. This is similar to setting a background color and not entirely aligned with using images as backgrounds, However, this is a great fallback option to have in the event your desired URL simply can’t be reached for any reason. Additionally, it is a nice tool to have in your design belt for various style-minded needs.
This calls on the property known as “linear-gradient”. The value syntax is quite simple to apply. You first need to define a specific direction for the gradient to flow. Think of the direction of light to dark. Next, you define the colors you want to use in the gradient blend. You can see an example of this in CSS below.
html {
background: linear-gradient(to left,blue,purple);
}
This provides the following background for the page.
Hexadecimal Codes
In this example, we use hexadecimal codes for the color to better define what to display.
html {
background: linear-gradient(to right,#ffffcc,#ff3300);
}
This will now deliver the following background effect to the page.
You can even set more than two colors to add to the effect with a more pronounced show.
html {
background: linear-gradient(to right,#0066ff,#ff3300,#ff00ff);
}
This provides an added effect to the html background.
An Ocean of Options
These CSS background options are just the diving board for an absolute ocean of possibilities in design. You can opt to have multiple images and colors applied to a page, or even move on to the idea of animations to really break into new horizons. The avenues open for just the background of a page can be a bit overwhelming in scale at times. A good mindset for aspiring CSS designers is to map out their thoughts and concepts before just having a go at the work itself.
Take time to sit down and consider not just what you want the site to look like, but also how you want it to operate for the user. Having a neat background won’t do you any good if the end-user does not want to use the site due to overbearing colors or difficult navigation issues. Lastly, remember to have fun with it.
___________________________________________________________________________
The modern world runs on code and that code comes from people like you. If you are looking to fly farther and stronger than ever before, take the first steps with code. Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nanodegree today to start the journey.
