How do I add margin to just background image?

I want to add a margin to t开发者_如何学Che background image so that I distance it from the middle of the screen, but adding it inside that class adds a margin to the whole body.

body.poppage {
    background: url(/Imagenes/tip3.png) 50% 200px no-repeat #E2E4E9;
}

How could I do it? Thanks

Use the containers padding to make a kind of margin for the background.

<div class="thebox">
    <p>HEY!</p>
</div>

div.thebox
{
box-sizing: border-box;
width:400px;
height:400px;

border: 2px solid #000000;
padding: 10px;

background: url(http://studio-creator.com/blog/public/html5.jpg) center;
background-size: contain;
background-repeat: no-repeat;
background-origin: content-box;
}

https://jsfiddle.net/gann1pwm/

you can use the background-position property

this work with me i have 50px navbar

background-size: contain !important;
background-repeat: no-repeat !important;
background-position: 0 50px !important;

You might want to try something else... like moving the image to the next child. You can make a wrapper div around your fixed-width div to accomplish this task.

You can't really add margins to a background image, since it's not actually an element. A couple things you might try:

1. If you've got a containing element just inside the body, you can apply the background image to this element and set margins on it.

2. If all you want is to make the background image appear to be floating within its container, set its background position.

You can add margin (kind of) using this

background-position-y

for y axis (margin-y) and

background-position-x

for x axis (margin-x)

be cautious if you using this for this is still experimental

my instagram @deanpi_ or @alfarisi.milham