I have a div with a border of 1 px. I have a square transparent-in-parts png image much smaller than the div 48px * 48px.
I'd like to position the square image such that it overlays the top left border of the div giving the appearance of both top and left borders going underneath the image.
Using background-image 'left top' puts the image inside the div borders which is not what I'm looking for. Wish I could show an example but I don't have any. Hope my question describes it well.
Here's the JSFiddle: http://jsfiddle.net/9sn22/1/
<div id='mybox'>text</div>
#mybox {
text-indent: 0.5in;
background-image:url('http://aerbook.com/site/images/quote-mark-icon-black.png');
border-radius:3px;
border: 1px solid #cccccc;
height: 300px;
font-weight: 200;
text-indent: 0.35in;
padding: 20px;
background-repeat:no-repeat;
background-position: left top;
}
Not quiet getting your question as there are no images or any demo for the desired effect you are trying to achieve, but from what I understood, you can use position: relative; for the container div and use a literal img tag inside the div and use position: absolute; with top: -1px; and left: -1px; respectively.
If you are trying to make the background-image move out of the element area than it's not possible...you need to use img for this
<div>
<img src="#" />
</div>
div {
position: relative;
border: 1px solid #000;
}
img {
position: absolute;
left: -1px;
top: -1px;
}
Update: (After you added a demo)
Do you need something like this?
do you mean something like this? http://jsfiddle.net/q44k5/
html:
<div> </div>
css:
div{
border: 1px solid red;
height: 100px;
width: 100px;
position: relative;
margin: 50px;
}
div:before{
content: '';
height: 20px;
width: 20px;
position: absolute;
top: -10px;
left: -10px;
background: green;
}
try this css below
#cLeft{
position:absolute;
}
background: #ffffff url('http://spikyarc.net/images/down_Arrow.png') no-repeat top left;
try this html below
<img id="cLeft" src="http://spikyarc.net/images/down_Arrow.png" />
<div class="content">
Your Text here.
</div>
Related
I try to get the middle of the top stripe of the border away but not the whole top, how can I do this?
I am doing Html. I tried a lot but without success I hope anyone can help me.
If I have understood you question correctly, something basic like this would hide the middle of the top border:
.box {
position: relative;
height: 100px;
width: 300px;
border: 10px solid #000;
}
.box .mask {
border-top: 10px solid #fff;
width: 100px;
position: absolute;
top: -10px;
left: 100px;
}
<div class="box">
<div class="mask"></div>
</div>
I have this one whole image that I have placed statically on my site however I want the parts to be clickable via a transparent button. I've got the button created however I want it to stay in its position if I had a different sized window etc.
Any thoughts?
HTML:
<img id="container" src="recentProjectsV2.jpg" />
GCSE Answers
CSS:
invisibleButton1 {
position: relative;
width: 290px;
height: 100px;
left: 45px;
top: -170px;
background-color: transparent;
border: 10px, orange;
font-size: 0;
cursor: pointer;
}
You need to change the position of your button from relative to absolute if you want it to stay in the EXACT same position when resized. If you want it to stay in the exact same position, like dead center vertically and horizontally, regardless of window size, I would suggest using flexbox though that will only work with IE 10 and up.
.invisibleButton1 {
position: absolute;
width: 290px;
height: 100px;
left: 45px;
top: -170px;
background-color: transparent;
border: 10px, orange;
font-size: 0;
cursor: pointer;
}
The button does stay in the position you told it to stay in.
Code:
CSS:
<style>
.invisibleButton1 {
position: relative;
width: 290px;
height: 100px;
left: 45px;
top: -170px;
background-color: transparent;
border: 10px, orange;
font-size: 0;
cursor: pointer;
}
</style>
HTML:
<body>
<img id="container" src="logo.jpg" />
<button id="invisibleButton1"> GCSE Answers </button>
</body>
If this isn't what you are looking for, please clarify your question and add your code.
I wanna make overlay background image to image. the code is here.
How can I put background image over img element?
my html is;
<div id="sidebar">
<div class="editor-select">
<img src="http://i.imgur.com/mh3noQH.jpg" alt="img"/>
</div>
</div>
my css is;
#sidebar{
width: 344px;
background: url("http://i.imgur.com/BQc7nYP.png") no-repeat top right !important;
float: left;
height: 500px;
margin-top: 45px;
padding: 8px;
position: relative;
z-index: 1000;
}
.editor-select{
width: 350px;
height: 360px;
position: relative;
}
.editor-select>img{
width: 320px;
height: 160px;
z-index : -1;
}
You can't. Your img element is contained within the #sidebar element, which effectively makes the img element on top of the #sidebar element. You cannot position a parent element on top of its child.
Pure CSS Solution
What you can do, however, is use a pseudo-element (:before or :after), positioned on top of your img element (which I've offset by 6px on all 4 sides to allow the image to overlap properly):
.editor-select:after {
content: '';
position: absolute;
top: -6px;
left: -6px;
height: 172px;
width: 332px;
background: url("http://i.imgur.com/BQc7nYP.png") no-repeat top right
}
CodePen Demo.
You can't have a background for a given element above the element contents .... You'll need to make some adjustments to your markup.
I forked your pen: http://codepen.io/anon/pen/ipmDv
This is your new HTML:
<div id="sidebar">
<div class="overlay"></div>
<img src="http://i.imgur.com/mh3noQH.jpg" alt="resim"/>
</div>
And your new CSS:
#sidebar{
width: 344px;
float: left;
height: 500px;
margin-top: 45px;
padding: 8px;
position: relative;
z-index: 1000;
}
.overlay{
width: 116px;
height: 116px;
position: absolute;
z-index:1000;
background: url("http://i.imgur.com/BQc7nYP.png") no-repeat top right !important;
top:0px;
right:25px;
}
I'm trying to position an image inside its container. Because the container has overflow:hidden, it is hiding half of the image — I would like to add bottom: 50%, so it shows the center of the image.
At the moment, if I do so, you see a gap between the image and its parent. Would anyone know how to position this, so you get to see the center of the image?
http://jsfiddle.net/tmyie/RGfdh/1/
<div class="img-ctnr-med">
<a href="#">
<img src="http://placehold.it/200x200" alt=""/>
</a>
</div>
img {
background-color:grey;
display: block;
position: absolute;
}
.img-ctnr-med {
width: 100px;
height: 100px;
border: 1px solid blue;
position: relative;
overflow: hidden;
}
It should be bottom: -50% instead, so it shifts the image 50% of the height of the container down towards the bottom edge of the container rather than up away from it.
When specifying values for top, right, bottom and left, positive values shift an element away from the respective side and negative values shift an element towards the respective side.
I think the best way to do this is to include the image as background image. It is cleaner then moving around elements. See this Fiddle as example.
html:
<div class="img-ctnr-med">
link text
</div>
css:
img {
background-color:grey;
display: block;
position: absolute;
bottom: 30px;
}
.img-ctnr-med a {
width: 100px;
height: 100px;
color: transparent;
text-indent: -9999px;
display: block;
border: 1px solid blue;
position: relative;
overflow: hidden;
background-image: ;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
Modify
img {
background-color:grey;
display: block;
position: absolute;
}
To
img {
background-color:grey;
display: block;
position: absolute;
left: -50%;
top:-50%;
}
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.