ansaurus

Question

css background image positioning (negative position?)

Answer 1

+3 A:

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>

Ólafur Waage 2009-06-28 00:47:47

Answer 2

A:

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

Jonathan Sampson 2009-06-28 00:51:39

Answer 3

A:

I have done exactly what you're looking to do on http://2ndrangers.org with the dog tag image in the upper left. View the CSS to see how it's done for Firefox, IE 6, IE 7, etc.

Elle 2009-06-29 17:54:35

ansaurus

tags:

views:

answers:

css background image positioning (negative position?)

related questions