[ACCEPTED]-css background image positioning (negative position?)-css
Another way is using the pseudo class :after 2 to inject an element after your box.
CSS 1
.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>
The background image is within the box so 5 moving it outside is not feasible like this. What 4 you could do is position your image outside 3 of the box and move it into it.
You can try 2 something like this, it's not foolproof 1 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>
There is another way using CSS3 only.
First 3 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 2 get the same effect is by adding additional 1 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/
#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>
0
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.