Defining a border in a background

Question

Defining a border in a background

Navigation

#1 by (3 votes)

2

Consider the following html code: link

In the fiddle was defined a div with an image located in the upper right corner. It occurs that I'd like to add a border between the image and the border of the div (simulating a 10px padding in the div). I tried to put padding in the div, but the background image does not move. I could also put a background-position: rigth 95%, but in that case I would need to know the div size and image size beforehand, and both of the information I do not have. The only known information is the space of 10px between the image and the border.

html css

asked by anonymous 27.09.2014 / 22:20

1 answer

Display block with Onclick How to redirect question "q=" from one site to another without changing the question?

score 3 · Accepted Answer

It's not quite what you're asking because CSS is very limited in this respect, but if you have control over the padding of the element, and it is the same as the content of <div> , one possibility is to use the background-origin to add the value of padding as margin:

div.box{
    padding:10px;
    background-image: url(/minha/imagem.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-origin: content-box;
}

Support: IE9 + (IE8 depending on usage), Opera 10.5+, Firefox 4+, Webkit (with prefix), Konkeror (with prefix). In Mobile I can not tell the compatibility.

See applied to your JS Fiddle .