CSS Background Position uses both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). As you know from previous tutorials, HTML is the foundational code that is used to structure a web page and its content, while CSS is used to enhance your web page with creative design aspects.
In this tutorial, we will explore how you can give your web page something extra by adding an image into the background and assuring proper positioning on the page. This gives you flexibility for placing the image anywhere you like. All you need to start with is a simple code editor such as Notepad which is free.
The Essentials of CSS Background Position
The HTML you will need to add in your page will control the entire body background of your web page.
Note: When you see this next to the HTML (/* The image used */) it is an inline comment that explains the code. I encourage you to use this in your own coding.
body {
background-image: url(‘wave.jpg’); /* The image used */
background-repeat: no-repeat; /* Do not repeat the image */
background-attachment: fixed; /* Assures image stays in place */
background-position: center; /* Controls your image position */
}
There is quite a list of possibilities for you to choose from when it comes to positioning your background image.
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottom
| <!DOCTYPE html> <html> <head> <style> body { background-image: url(‘wave.jpg’); /* The image used */ background-repeat: no-repeat; /* Do not repeat the image */ background-attachment: fixed; /* Assures image stays in place */ background-position: center top; /* Controls your image position */ } </style> </head> <body> <h1>The Background-position Property</h1> <p>Here, the background image will be positioned centered at top.</p> </body> </html> |
This will put the image at the center top of your web page.
Using a Percentage Value
You can also use percentage as another type of value to control image background position.
When using x% y%, note that the first value (x%) is the horizontal position and the second value (y%) is the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. The default value is: 0% 0%.
Let’s try using a percentage and see what happens.
| <!DOCTYPE html> <html> <head> <style> body { background-image: url(‘wave.jpg’); /* The image used */ background-repeat: no-repeat; /* Do not repeat the image */ background-attachment: fixed; /* Assures image stays in place */ background-position: 50% 25%; /* Controls your image position */ } </style> </head> <body> <h1>The Background-position Property</h1> <p>Here, the background image will be positioned centered at top.</p> </body> </html> |
As you can see, the image is centered using 50% for the first value, and with 25% controlling the vertical alignment, the image is pushed further down the page.
Using a Pixel Value
This time, instead of using percentage values, replace them with pixel values. This means it will be necessary to calculate the number of pixels to use to control the background image position. Use (px) to signify the pixel value.
Let’s try using a percentage and see what happens.
| <!DOCTYPE html> <html> <head> <style> body { background-image: url(‘wave.jpg’); /* The image used */ background-repeat: no-repeat; /* Do not repeat the image */ background-attachment: fixed; /* Assures image stays in place */ background-position: 125px 150px; /* Controls your image position */ } </style> </head> <body> <h1>The Background-position Property</h1> <p>Here, the background image will be positioned centered at top.</p> </body> </html> |
As you can see, the first value of 125px pushed the image to the right, and the pixel value of 150 pushed the image down in the vertical alignment. Using the pixels is a really nice, precise way to control alignment when perfection is critical.
Pro-Tip
For the user who wants to try out something more complex, we are adding in a longer section of code for you to try out. I will explain the sections so that you understand how each area operates towards controlling all that you see on the page. One area you can explore is our blog on Exploring the Dynamic Range of Web Image Background Size.
You will create text that is on top of an image and even a button that you can define to click anywhere you want. Imagine you want to showcase your art and have people hire you for a photography job.
| <!DOCTYPE html> <html> <head> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .wave-image { /* The background image defined */ background-image: url(“wave2.jpg”); background-color: #cccccc; height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .text { /* The text positioning defined */ text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } </style> </head> <body> <div class=”wave-image”> <div class=”text”> <h1 style=”font-size:50px”>I am Udacity</h1> /* Defining your large text */ <h3>And I’m a Surf Photographer</h3> /* Defining your smaller text */ <button>Hire me</button> /* Defining your button to click on */ </div> </div> </body> </html> |
The result is a beautiful showcase of your art as well as an introduction by the artist, which is you.
Final Tips
Always remember to experiment and see the results on your web page before you take your web page live to your audience. Also, I encourage you to combine these CSS Background Position features with other amazing CSS techniques. You might want to check out our blog on Working with Images and HTML that can assist you in controlling image size and layout.
Simple solutions can bring great results to those who visit your web page. Always keep your audience in mind to assure a user-friendly experience.
Where to Next?
This introduction to CSS Background Position should provide a starting point for further inquiry into text design, layout, and practical applications with HTML and CSS.
We will continue to explore other areas of design in the next blog. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
<p><a class=”btn btn-primary” href=”https://www.udacity.com/course/intro-to-programming-nanodegree–nd000” target=”blank” rel=”noopener noreferrer”>Start Learning</a></p>
