Background-position CSS confusion with percentage values?

  • HTML/CSS
  • Thread starter shivajikobardan
  • Start date
  • Tags
    Confusion Css
In summary: I'm getting different output when I try the same code with the imageIn summary, background-position: 50% 50%; is not producing expected results if the body doesn't have any height. To center the background image in the body, use background-position: center center;.
  • #1
shivajikobardan
674
54
TL;DR Summary
percentage value in background-position property. What happens there?
This is my background image.
6kJvOSHo0HzdBhjItUn2qTSQnNd1ZUfRLg9FkAWFQ4vajkNVCQ.png

I set:
background-position:50% 50%;

I get this as my output:
XS5OEIF_2UMs3d-xZKfKN3-6dctsWBHr3VcoqqlOGxVh5rp4hg.png

But I don’t understand the output.
So, I read little bit about background-position again.A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element.
https://www.htmlhelp.com/reference/css/color-background/background-position.html

With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
https://wiki.cdot.senecacollege.ca/wiki/CSS_GUIDE_BACKGROUND_POSITION

A horizontal value of 25% positions the point 25% from the left edge of the image at a point that is 25% from the left edge of the background positioning area.

“Learning web design” by Jenniver Nierdest Robbins

If I wanted to put the background image at the center using the “percentage percentage”, how’d I do it? (50% 0% doesn’t work).

My HTML Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
my name is tommy
</body>
</html>

My CSS code:
Code:
body{
    background-color:yellowgreen;
    background-repeat: no-repeat;
    background-image: url(../images/circle.png);
    background-position:50% 0%;
  
}
CSS Code is tamed CSS code in background position just for reference.
 
Technology news on Phys.org
  • #2
shivajikobardan said:
I set:
background-position:50% 50%;

I get this as my output:
View attachment 315888
Are you sure? That looks to me like background-position: 50% 0%;

shivajikobardan said:
If I wanted to put the background image at the center
Then use background-position: center;

shivajikobardan said:
using the “percentage percentage”, how’d I do it? (50% 0% doesn’t work).
No, this should be obvious. You want background-position: 50% 50%;, but why make life hard for yourself? background-position: 50% 50%; = background-position: center center; = background-position: center;.

shivajikobardan said:
CSS Code is tamed CSS code in background position just for reference.
What does this mean?
 
  • #3
background-position: 50% 50%;
isn't producing expected results like you said.
 
  • #4
shivajikobardan said:
background-position: 50% 50%;
isn't producing expected results like you said.
Perhaps the body doesn't have any height. Try adding height: 100vh;.
 
  • #5
now, I'm getting different output when I try the same code with the image posted here.
 
  • #6
pbuk said:
Try adding height: 100vh;.

shivajikobardan said:
now, I'm getting different output when I try the same code with the image
And why is that unexpected after changing the code?
 
  • Like
Likes shivajikobardan
  • #7
pbuk said:
Perhaps the body doesn't have any height. Try adding height: 100vh;.
wow. this fixed. I didn't get the reason why this fixed? Body doesn't have height without us specifying?
 
  • #8
Tom.G said:
And why is that unexpected after changing the code?
I'd missed that update of pbuk.
 
  • Haha
Likes Tom.G
  • #9
shivajikobardan said:
Body doesn't have height without us specifying?
Like any block element, the <body> will only have (inner) height if it has content, or if it is set as an attribute or in CSS.
 
Last edited:
  • #10
pbuk said:
Like any block element, the <body> will only have (inner) height if it has content, or if it is set as an attribute or in CSS.
thank you.
 

FAQ: Background-position CSS confusion with percentage values?

1. What is the purpose of using percentage values in CSS background-position?

Percentage values in CSS background-position are used to specify the position of a background image relative to its container. This allows for more flexibility in positioning the background image, as the position will adjust depending on the size of the container.

2. How does the percentage value relate to the background image?

The percentage value in CSS background-position relates to the position of the background image in relation to the container. For example, a value of 50% means that the background image will be centered horizontally or vertically within the container.

3. Can I use percentage values for both horizontal and vertical positioning?

Yes, percentage values can be used for both horizontal and vertical positioning in CSS background-position. This allows for more precise positioning of the background image within the container.

4. What happens if I use a percentage value that is greater than 100%?

If a percentage value greater than 100% is used in CSS background-position, the background image will be positioned outside of the container. This can be useful for creating unique effects, but it may also cause the background image to be cut off.

5. Can I use percentage values with background-size as well?

Yes, percentage values can be used with both background-position and background-size. This allows for even more control over the positioning and size of the background image within the container.

Similar threads

Replies
10
Views
1K
Replies
1
Views
2K
Replies
5
Views
412
Replies
5
Views
509
Replies
2
Views
1K
Replies
2
Views
1K
Replies
3
Views
2K
Replies
7
Views
2K
Replies
3
Views
3K
Back
Top