CODEWITHSUNDEEP
htmlcssbackground
its_me
its_me

Reputation: 11338

How To Have Margin For Background Image?

The following is the structure of the code of my website.

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

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

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

The problem I have with this is, about 50px of the background image is hidden under the "top-header" div, which is 50px in height (It's the menu). How do I adjust the code so that the background image shows properly, fully below the menu (top-header)?

Just so, you know, I tried this css code as well:

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

And this changed the white background of my content to the image. Which is not what I want.

The only way is to move the starting point of background-image 50px down. How do I define that? Please try help. Thanks.

Upvotes: 6

Views: 24404

Answers (2)

Dayz
Dayz

Reputation: 269

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 for positioning the background image.

Upvotes: 1

user860672
user860672

Reputation:

Sorry guys, this was easy. I actually followed the CSS Twitter uses for background, and I got it. I just had to replace "top right" with "right 50px" where 50px is equal to the margin you'd 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;
}

cheers!

Upvotes: 5

Related Questions