CSS background image position x y?

CSS background image position x y?

If you want to place an image as a background and position it anywhere you want, use this code from your css file:

1
        background-position:99% 120px;

The full code looks like:

2
3
4
5
	background-color: #f3f3f3;
	background-image:url(https://incvice.com/image.png);
	background-repeat:no-repeat;
	background-position:99% 120px;

Notice that you can’t have two images set as background-image. You can have one background color and one background image.

The trickiest part is to find the best background-position values. It will look different on different resolutions.


From the code, the first value is “x” while the second one is “y”. You can use percents so the image will adjust better depending on the resolution.

The example is displaying a small image with 150px width on the right side of the screen for the default resolution of a 15 inches laptop.
For bigger monitors, the image appears a bit on the right.

Add a comment: