Posistion a background image into its own element's margin - Is this Possible?

Question

I have anchor item with margins around it. I want to posistion a bg image in the margin. Can you do this? It works with padding, but want to use margin. To note jquery is adding in the .active class to the link. Maybe using box-sizing?

HTML

<nav><a class="arrow_me" href="Page">Page</a><a href="Page">Page</a><a href="Page.aspx">Page</a><a href="Page" target="_blank">Page</a></nav>

Before Css With Margin - doesn't work:

nav {max-width: 960px; margin: 0 auto; padding:0 15px}
nav a {margin: 20px 35px 20px 0; color:#48718c; text-transform:uppercase;     text-decoration:none !important; font-size:11px; float:left}
nav a.arrow_me.active {background: url(../img/arrow.png) no-repeat 50% 35px;}
nav a:hover, nav a.active, #menuFilter a.current, #menuFilter a:hover {color:#cdcdce}

After with padding - working:

nav {max-width: 960px; margin: 0 auto; padding:0 15px}
nav a {padding: 20px 35px 20px 0; color:#48718c; text-transform:uppercase;      text-decoration:none !important; font-size:11px; float:left}
nav a.arrow_me.active {background: url(../img/arrow.png) no-repeat 50px 35px;}
nav a:hover, nav a.active, #menuFilter a.current, #menuFilter a:hover {color:#cdcdce}

score 0 · Answer 1 · answered Aug 07 '14 at 22:38

0

Padding is on the inside, which is why it works.

A margin is on the outside, imagine it as in invisible border.

answered Aug 07 '14 at 22:38

Nick

2,261
5
33
65

Right - but is there away to do it? I was not sure if there was or not. Any ideas if there is a trick? – RooksStrife Aug 07 '14 at 22:43
Not as far as I know, sorry! What is it you're trying to achieve? There may be a better way to do it? – Nick Aug 07 '14 at 22:45
The padding will work fine, but would have preferred the margin. Don't really want to drop and position a div. So will stick with padding unless someone can solve with margin. – RooksStrife Aug 07 '14 at 22:46

score 0 · Accepted Answer · answered Aug 08 '14 at 01:14

No, as while the margin is attached to the element, it cannot display it's contents.

Here's a Fiddle showing the effect in action.

Note that the background image cannot extend beyond the border, despite being larger.

This code will show the Wikipedia logo cropped off on the left and bottom when it reaches the #myDiv border.

#myDiv {
    width:50px;
    height:50px;
    padding:10px;
    margin:20px;
    border:solid 1px red;
    background-image:url('http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png');
}

Padding can display background images as it lies within the border, but margins are simply forced space between the element and other elements. Here's a look at the CSS Box model

Posistion a background image into its own element's margin - Is this Possible?

2 Answers2