Geek Answers Handbook

Css background image positioning (negative position?)

I am trying to add an icon that is on top of the border, dividing it in half.

Here is what I still have:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> body { background-color:#26140C; } .box { width: 800px; margin: 0 auto; margin-top: 40px; padding: 10px; border: 3px solid #A5927C; background-color: #3D2216; background-image: url(Contents/img/icon_neutral.png); background-repeat: no-repeat; background-position:10px -20px; } </style> </head> <body> <div class="box"> <h1>This is a test!</h1> </div> </body>

Instead of the image above the border, I hoped it was below it.

+6
html css
source share
4 answers

The background image is inside the field, so moving it outside is not possible. What you can do is position your image outside the box and move it into it.

You can try something like this, it is not reliable, but it can help you with it.

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> body { background-color:#26140C; } .box { width: 800px; margin: 0 auto; margin-top: 40px; padding: 10px; border: 3px solid #A5927C; background-color: #3D2216; } .image { float: left; position: relative; top: -30px; } </style> </head> <body> <div class="box"> <img src='icon_neutral.png' class="image" /> <h1>This is a test!</h1> </div> </body>
+8
source share

Another way is to use a pseudo-class: after entering the element after the field.

CSS

  .box{ position:relative; } .box:after{ content:url(icon_neutral.png); display:block; position:relative; top: -30px; }

HTML

 <body> <div class="box"> <h1>This is a test!</h1> </div> </body>
+12
source share

There is another way to use CSS3.

First set border-top: transparent , background-clip: border-box , then a negative background position is possible.

 .box { border-top: 8px solid transparent; background-clip: border-box; background-position: 0 -8px; background-image: url(image.png); background-repeat: repeat-x; /* ... */ }

Another way to get the same effect is to add an additional background-origin: border-box , then a negative background position is no longer required.

 .box { border-top: 8px solid transparent; background-clip: border-box; background-origin: border-box; background-position: 0 0px; background-image: url(image.png); background-repeat: repeat-x; /* ... */ }

Additional Information:

http://www.css3.info/preview/background-origin-and-background-clip/

+5
source share
 #box { position:relative; } #shield { width:41px; height:41px; position:absolute; top:-25px; left:25px; } <div id="box"> <div id="shield"> <img src="shield.png" /> </div> <h1>Site Title</h1> </div>
+1
source share

More articles:


All Articles