How To Center A Background Image

CSS Background Position uses both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). Every bit you lot know from previous tutorials, HTML is the foundational code that is used to structure a spider 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 tin can give your web page something extra past adding an image into the groundwork and assuring proper positioning on the page. This gives y'all flexibility for placing the paradigm anywhere you like. All you need to starting time with is a simple code editor such as Notepad which is complimentary.

The Essentials of CSS Background Position

The HTML y'all will need to add in your page will control the entire body groundwork of your web page.

Annotation: When you meet this next to the HTML (/* The epitome used */) it is an inline comment that explains the code. I encourage you to utilize this in your own coding.

body {
  groundwork-image: url('wave.jpg'); /* The prototype used */
  background-repeat: no-repeat; /* Do non repeat the prototype */
  background-zipper: fixed; /* Assures epitome stays in place */
  background-position: middle; /* Controls your paradigm position */
}

At that place 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
correct bottom
center tiptop
middle centre
center bottom

<!DOCTYPE html>
<html>
<head>
<style>
trunk {
  groundwork-prototype: url('wave.jpg'); /* The image used */
  groundwork-repeat: no-echo; /* Do not echo the image */
  background-zipper: fixed; /* Assures prototype stays in place */
  background-position: middle top; /* Controls your image position */
}
</mode>
</head>
<torso>

<h1>The Background-position Property</h1>
<p>Here, the background image will be positioned centered at pinnacle.</p>

</trunk>
</html>

This will put the image at the center top of your web folio.

Using a Pct Value

You lot can also utilize 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%.

Allow'south endeavor using a pct and see what happens.

<!DOCTYPE html>
<html>
<head>
<mode>
torso {
  background-image: url('wave.jpg'); /* The prototype used */
  background-repeat: no-repeat; /* Do non repeat the prototype */
  background-attachment: fixed; /* Assures paradigm stays in place */
  background-position: fifty% 25%; /* Controls your image position */
}
</style>
</caput>
<body>

<h1>The Background-position Property</h1>
<p>Here, the background image will be positioned centered at top.</p>

</body>
</html>

As you tin meet, the epitome is centered using 50% for the beginning value, and with 25% controlling the vertical alignment, the prototype is pushed further down the folio.

Using a Pixel Value

This time, instead of using percentage values, supplant them with pixel values. This means it will be necessary to calculate the number of pixels to use to control the background prototype position. Use (px) to signify the pixel value.

Let's try using a percent and come across what happens.

<!DOCTYPE html>
<html>
<head>
<way>
trunk {
  background-image: url('wave.jpg'); /* The epitome used */
  background-echo: no-echo; /* Do not repeat the paradigm */
  background-attachment: fixed; /* Assures image stays in place */
  background-position: 125px 150px; /* Controls your image position */
}
</mode>
</head>
<body>

<h1>The Background-position Belongings</h1>
<p>Here, the background image will be positioned centered at top.</p>

</torso>
</html>

Equally 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 actually overnice, precise way to control alignment when perfection is disquisitional.

Pro-Tip

For the user who wants to try out something more complex, nosotros are calculation in a longer section of code for you to endeavour out. I will explicate the sections and then that you sympathize how each area operates towards controlling all that you run across on the page. Ane area you can explore is our web log on Exploring the Dynamic Range of Spider web Image Background Size.

You lot will create text that is on pinnacle of an epitome and even a button that y'all tin can define to click anywhere you lot want. Imagine y'all want to showcase your art and have people hire you for a photography job.

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family unit: Arial, Helvetica, sans-serif;
}

.wave-image { /* The background image defined */
  background-image: url("wave2.jpg");
  background-color: #cccccc;
  height: 500px;
  background-position: centre;
  groundwork-repeat: no-repeat;
  groundwork-size: cover;
  position: relative;
}

.text { /* The text positioning defined */
  text-marshal: center;
  position: accented;
  meridian: 50%;
  left: 50%;
  transform: translate(-50%, -l%);
  color: white;
}
</mode>
</head>
<trunk>

<div class="wave-paradigm">
  <div class="text">
    <h1 manner="font-size:50px">I am Udacity</h1> /* Defining your big text */
    <h3>And I'm a Surf Photographer</h3> /* Defining your smaller text */
    <button>Rent me</push button> /* Defining your button to click on */
  </div>
</div>

</trunk>
</html>

The outcome is a beautiful showcase of your art as well as an introduction by the artist, which is you.

Final Tips

Ever recall to experiment and run into the results on your web page before you take your web page live to your audience. Also, I encourage you lot to combine these CSS Background Position features with other amazing CSS techniques. Y'all might want to check out our web log on Working with Images and HTML that can aid y'all in controlling image size and layout.

Simple solutions tin bring swell 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 pattern in the next blog. The hope for this introduction is that information technology piques your involvement, inspires you to explore farther, and dive deeper into the world of web design.

HTML is a neat way to start learning code, but the professional world demands more than and more. Why not supercharge your skills and options by taking information technology even farther. Enroll in our Intro to Programming Nanodegree program today!

<p><a course="btn btn-primary" href="https://world wide web.udacity.com/class/intro-to-programming-nanodegree–nd000" target="blank" rel="noopener noreferrer">Outset Learning</a></p>