Css Background Image Positioning (negative Position?)

Question

I'm trying to add an icon which sits on top of the border, splitting it in half. Here is what I have so far:

Solution 1:

Another way is using the pseudo class :after to inject an element after your box.

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>

Solution 2:

The background image is within the box so moving it outside is not feasible like this. What you could do is position your image outside of the box and move it into it.

You can try something like this, it's not foolproof but can get you some of the way there.

<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>

Solution 3:

There is another way using CSS3 only.

First set border-top: transparent, background-clip: border-box, then 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 by adding additional background-origin: border-box, then 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;
   /* ... */
}

More info:

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

Solution 4:

#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>

Code Html5

Css Background Image Positioning (negative Position?)

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Css Background Image Positioning (negative Position?)"