How To Move A Background Image Up In Css

Whether you're edifice your site from scratch or using a framework like Bootstrap CSS, you'll accept a few standard elements, including images, paragraphs, buttons, and navigation bars.

One time y'all build these elements in HTML, you tin customize them in CSS to improve suit your unique layout and branding.

Download Now: Free HTML & CSS Hacks

Taking background images, for example. By default, any groundwork images volition be placed at the top left of their containers. Notwithstanding, you may want your heading to get in the top left of a container and your paradigm to be in the bottom right. Or you may desire an image to take up the entire background of your homepage and overlay text on superlative of it.

Whatsoever the reason, y'all can change the position of your groundwork images using the background position holding in CSS.

In this postal service, we'll explore this holding in depth, defining its syntax and holding values and walking through different examples. Let'due south get started.

How to Position a Background Image in CSS

In CSS, the groundwork-position belongings enables you lot to move a groundwork image within its container. Below we'll look at its syntax and property values and then you can use this belongings in your own code.

Syntax of CSS Background Position

The syntax of the groundwork position property in CSS is every bit follows:

{ background-position: value }

In that location are a number of dissimilar values you lot can utilize to define this belongings, which tin be grouped into three major categories. Let's describe each below.

Belongings Values of CSS Background Position

To specify the background position property in CSS, you tin use whatever of the following:

Length values
Percentages
Keywords

Allow's define each type below.

Length Values

Length values are the simplest way to ascertain the background position in CSS. If using two length values, 1 value sets the horizontal position of the groundwork epitome and the other sets the vertical position. In other words, these represent the x and y coordinates of the prototype.

Recall how the default position of a groundwork image is meridian left? In terms of length, that default value is 0 0.

Knowing that the first value represents the distance from the left edge of the container and the second value represents the distance from the top border, setting the background position belongings to 50px 150px will move the image l pixels to the correct and 150 pixels down.

In addition to pixels, setting length values in em units is common. Since european monetary system are a relative unit, users tin can adjust the size of the image in all browsers.

Permit'due south say only one length value is specified in the CSS. That value specifies the X coordinate relative to the left edge of the container. The 2nd value, which specifies the Y coordinate to the top border of the container, is assumed to exist 50%.

Percentages

Percentages are trickier than length values considering they affect the alignment of the epitome and the container. Defining the property with 10% means that the X% mark of the image volition be on the X% mark of the container.

Setting the groundwork position to 50% 50%, for example, ways the browser volition align the middle of the image with the middle of the container. Setting the background position to 100% 100%, on the other hand, ways the browser volition align the final pixel of the image with the terminal pixel of the container.

If only i percentage value is specified in the CSS, then the aforementioned dominion that applies to length values applies. That one pct value specifies the X coordinate relative to the left edge of the container. The second value, which specifies the Y coordinate to the top border of the container, is assumed to be 50%.

Keywords

Keywords are simply shorthand for percentages, designed to exist easier to remember and write than percentages. Beneath are the 5 keywords and their equivalent pct values.

acme: 0% vertically
lesser: 100% vertically
right: 100% horizontally
left: 0% horizontally
center: fifty% horizontally (unless horizontal is already defined, and so this is applied vertically)

Say only 1 keyword is specified in the CSS. And so a like dominion that applies to other property values applies. The only difference is that the outset value does not necessarily specify the X coordinate. That's because the keywords above are relative to the X- and Y-axis.

So if the keyword specified is pinnacle or bottom, and then that specifies the Y coordinate relative to the top edge of the container. The 2nd value, which specifies the X coordinate to the left border of the container, is assumed to be 50%. If the keyword specified is left or right, and so that specifies the 10 coordinate and the 2d value, which specifies the Y coordinate, is causeless to be 50%.

If you specify two keyword values in CSS, y'all have to pair the vertical with the horizontal. So if one value is top or bottom, then the other value tin can't be height or lesser. In the same way, if ane value is left or correct, then the other value can't be left or correct.

Below are the only possible combinations for these keywords:

left top
left middle
left bottom
right top
correct centre
correct bottom
center top
center center
eye lesser

If y'all're using keywords exclusively, then the gild doesn't matter. "Left superlative" is the same as "elevation left," and so on downwardly the list. Yet, if you lot're using both keywords and percentages or length units, then the lodge does matter.

Let'due south take a closer expect at these combinations below.

Three- or Iv-value Syntax

In the sections above, we discussed how you can define the groundwork position property with 1 or ii values. Y'all tin, in fact, use up to four values. The more than values you employ, the more exact you can position your image.

Say you want to place a groundwork image 10px from the right and 20px from the lesser of the container. Then you'd utilize the following four-value groundwork position:

                                                 #idexample {
                  background-position: right 10px bottom 20px;
                }

Notice the order of the values is keyword, length unit, keyword, length unit. A background position with more than than ii values must follow this format, with a keyword preceding a length or per centum unit of measurement.

You tin can besides specify the groundwork position property with three values. The browser just interprets the fourth value as "missing" and gives it the default value of 0. Say you want to place a groundwork epitome 30px from the correct and 0px from the bottom of the container. Then you lot'd use the post-obit three-value groundwork position:

                                                 #idexample {
                  groundwork-position: correct 30px lesser;
                }

Let'southward take a expect at some examples using these different property values below.

Examples of the CSS Groundwork Position Property

In the examples below, y'all'll encounter the background position property combined with other backdrop defining the groundwork paradigm, color, position, and more. The groundwork-repeat property, for example, sets if a groundwork prototype will be repeated and how, while the background-attachment property sets whether a background prototype is fixed or scrolls with the residuum of the folio.

These properties tin can all exist spelled out on their own line, or combined in one line using the background autograph holding. The examples below will show both formats as well as different types of CSS selectors.

These examples were created using the W3Schools Online Code Editor and take a 636 10 365 container. You tin can click any of the Source links to see the full code snippet backside the instance and endeavor your own.

Length Values Instance

The example below uses the length value "10px" to position the W3Schools.com logo. The causeless second value is therefore l%. Notice that it besides uses an ID selector to target the <torso> element with the ID proper noun "length."

Here's the HTML:

                                                 <body id="length">
                <h1>CSS Groundwork Position Belongings</h1>
                <p>The backgroud epitome will exist positioned x pixels to the right and 50% down the page. This percentage is how the browser interprets the "missing" second length value.</p>
                </body>

Here's the CSS:

                                                 #length {
                  background-paradigm: url("/images/logo.png");
                  background-echo: no-repeat;
                  background-zipper: fixed;
                  groundwork-position: 10px;
                }

Here'south the result:

CSS background position property defined by length values in pixels

Source

Percentages Example

The example below uses the pct values "70% 35%" to position the W3Schools.com logo. Find that it also uses a class selector to target the <torso> element with the classname "snug."

Here's the HTML:

                                                 <body class="snug">
                <h1>CSS Background Position Property</h1>
                <p>The spot on the background image that is lxx% from the left and 35% from the top is placed at the spot of the container that is 70% from the container's left and 35% from the container'due south peak.</p>
                </body>

Hither'southward the CSS:

                                                 .snug {
                  groundwork-paradigm: url("/images/logo.png");
                  background-echo: no-repeat;
                  groundwork-attachment: fixed;
                  background-position: 70% 35%;
                }

Here's the issue:

CSS background position property defined by percentage values

Source

Keywords Example

The example below uses the keyword values "bottom correct" to position the W3Schools.com logo. Notice that it as well uses a blazon selector to target the <torso> chemical element.

Here's the HTML:

                                                 <body>
                <h1>CSS Background Position Belongings</h1>
                <p>The groundwork image volition be positioned lesser right.</p>
                </torso>

Here's the CSS:

                                                 trunk {
                  background-image: url("/images/logo.png");
                  groundwork-repeat: no-repeat;
                  background-attachment: fixed;
                  background-position: bottom correct;
                }

Here'due south the issue:

CSS background position property defined by keyword values

Source

4-value Syntax Instance

The example beneath uses keyword and per centum values to position the W3Schools.com logo. Discover that information technology also uses the background shorthand holding and an attribute selector to target the <torso> element with the title attribute "example."

Here'due south the HTML:

                                                 <trunk title="example">
                <h1>CSS Background Position Belongings</h1>
                <p>In this example, the beginning keyword valye"tiptop 10%" defines Y and the other keyword value "right five%" defines X.</p>
                </body>

Here'south the CSS:

                                                 [championship=example] {
                  background: url("/images/logo.png")no-repeat fixed acme 10% right 5%;
                }

Hither's the consequence:

CSS background position property defined with four-value syntax

Source

Defining the Position of the Groundwork Image

In CSS, you can command the position of each background epitome on a page with the groundwork position property. This tin can help y'all create unique layouts for your site. Y'all'll just need some basic knowledge of HTML and CSS to practice so.

New Call-to-action