... code ...
Geek Answers Handbook

How to get margin for background image?

Below is the code structure of my website.

<body class="xxx"> <div id="top-header">... code ...</div> <div id="wrapper">... code ...</div> </body>

And this is the CSS code that I use for the background image.

 body { background-image: url('http://example.com/background-image.jpg'); background-position: top right; background-repeat: repeat; }

The problem with this is that about 50 pixels of the background image is hidden under the "top-header" heading, which has a height of 50 pixels (this menu). How to adjust the code so that the background image is displayed correctly, completely under the menu (top header)?

Just like that, you know, I also tried this css code:

 #wrapper { background-image: url('http://example.com/background-image.jpg'); background-position: top right; background-repeat: repeat; }

And that changed the white background of my content to an image. This is not what I want.

The only way is to move the starting point of the background image 50 pixels down. How to determine this? Please try the help. Thanks.

+4
source share
2 answers

Sorry guys it was easy. I actually watched the use of Twitter CSS for the background, and I got it. I just had to replace “top right” with “right 50px”, where 50px is the position you would like to leave at the top of the background image.

 body { background-image: url('http://example.com/background-image.jpg'); background-position: right 50px; background-repeat: repeat; }

Hooray!

+3
source

use this in style:

 background-position: calc(100% - 30px) center;

example:

 body { background-image: url('http://example.com/background-image.jpg'); background-position: calc(100% - 30px) center; background-repeat: repeat; }

instead of 30px, you can change the pixel value to position the background image.

0
source

More articles:


All Articles