Menu
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:
<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 image being over the border like I was hoping, its under it.
328
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>
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>
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/
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
