Add margin on top of the background image

Question

I want to add margin on top of the background image. Here is my background-image css code

body {
  background-image:url(Images/Home.png);
  background-position:top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

I tried to add margin-top:10px; in the css body code, but it's not working. Only the div's moving

Which `div`? You are only modifying the `body`. – pp_ Feb 16 '16 at 02:02 — pp_, Feb 16 '16 at 02:02

score 2 · Answer 1 · answered Feb 16 '16 at 02:00

2

How about the following instead of the one you have for background-position?

background-position:0px 10px;

answered Feb 16 '16 at 02:00

Ashraf Iqbal

It worked! unfortunately the background image change position to the left. Do you know how to fix it? I tried setting the position to center, not working either. – Ruffy R Feb 16 '16 at 02:08
background-position:center 10px; – Ashraf Iqbal Feb 16 '16 at 02:09

pp_ · Answer 2 · 2016-02-16T02:06:30.733

0

This will offset the background-image from the top by 10 pixels:

background-position: top 10px;

edited Feb 16 '16 at 02:06

answered Feb 16 '16 at 01:59

pp_

tried, it's not working and the background image change its position to the left – Ruffy R Feb 16 '16 at 02:05

score 0 · Answer 3 · answered Feb 16 '16 at 02:02

0

You could add a div before the body, set it's height to 10px. Should give you the spacing you're looking for.

answered Feb 16 '16 at 02:02

3 Answers3