Menu
I have a 500x500 px image which is set as a background image on my website (as background-image of <body>) But I need this image to be located in a bottom right corner of the webpage. How can I achieve this? (better with css method)
Thank You.
879
You can use position: absolute; bottom: 0px; right: 0px; which makes sure that your company logo is placed to a certain location and it is affected by the scrolling of the page.
Give it a shot. Essentially, background-position: 90% 50% will make the right edge of the background image line up 10% away from the right edge of the container. Create a div containing the image. Explicitly set the position of the containing element position: relative if not already set.
The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin .
The position that is relative to the positioning layer, can be set by using the background-origin property. Syntax: background-position: value; Note: The background-image is placed default to the top-left corner of an element with a repetition on both horizontally & vertically.
Voilà:
body { background-color: #000; /*Default bg, similar to the background's base color*/ background-image: url("bg.png"); background-position: right bottom; /*Positioning*/ background-repeat: no-repeat; /*Prevent showing multiple background images*/ } The background properties can be combined together, in one background property. See also: https://developer.mozilla.org/en/CSS/background-position
136
for more exactly positioning:
background-position: bottom 5px right 7px; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
