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;
}
Related
My text has a background as an icon, so I need half of icon be visible out of block, but overflow:hidden; won't allow me to, I tried giving text-overflow:visible; but I don't know too much about css Html, here's a little example
.example{
position:relative;
overflow:hidden;
height: 277px;
width: 150px;
background: #000;
}
.example-title{
position:absolute;
top: -6%;
left: 63%;
background:#0d3351;
padding: 35px 0;
}
<div class="example">
<span class="example-title">
Visible
</span>
</div>
Here is screenshot
enter image description here
An element with position: absolute could be visibile outside of its parent with overflow: hidden only if the parent does not have a position rule, so I think that you'll need a common parent element with position: relative rule and no position rule on the .example element.
.container {
position: relative;
width: 150px;
}
.example{
overflow:hidden;
height: 277px;
width: 150px;
background: #000;
}
.example-title{
position:absolute;
top: -6%;
left: 63%;
background:#0d3351;
padding: 35px 0;
}
<div class="container">
<div class="example">
<span class="example-title">
Visible
</span>
</div>
</div>
i have two divs
first div : text-logo
.text-logo {
width: 250px;
height: 60px;
margin: auto;
border: 2px solid #07a2a0;
border-radius: 15px 50px 15px 50px;
margin-top: 100px;
}
<div class="text-logo"><h4>Just training/cit</h4></div>
second div : image-logo
.image-logo { overflow: hidden; height: 500px;}
.image-logo .left
{
float: left ;
width: 30%;
position: relative;
}
.image-logo .right
{
float: left;
width: 70%;
}
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
}
<div class="image-logo">
<div class="left">
<img src="images/logo.png">
</div>
<div class="right">
<h2>Being auomated much more easy than the manual things
</h2>
<hr>
</div>
i cant see the blue logo with the original size, the upper part of the logo is hidden ,
the picture will show you the problem
,
Try to add z-index
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:2;
}
That's because the div .text-logo is above your logo div. You should change the z-index of one of them. It defines which element should be above another element. Use for your z-index a realistic value, to keep your code a bit cleaner.
.image-logo .left img {
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:5;
}
Check that the element's color is not the same as the background color, as that will obviously make you not to see your element.
I have been a victim of this severally. Hope it helps someone.
How can I get the percentage declaration to work (#case-left, #case-right)..?
My goal is to align these these two elements to the left and right of the image respectively, always 50% from the top of the image.
As shown in the image below:
As far as I can tell, my #nav-container element isn't high enough.
HTML:
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
</div>
<img src="http://s7.directupload.net/images/140625/yflekqdc.jpg">
</div>
CSS:
#case-example-cover {
height: 100%;
margin-top: 80px;
width: 100%;
}
#case-example-cover #nav-container {
margin: 0 auto;
max-width: 980px;
position: relative;
width: 100%;
}
#case-example-cover #case-left {
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
float: right;
height: 38px;
width: 38px;
position: absolute;
left: 0;
top:50%;
}
#case-example-cover #case-right {
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
height: 38px;
width: 38px;
position: absolute;
right: 0;
top:50%;
}
#case-example-cover img {
height: auto;
width: 100%;
}
Check out my current sample at JS fiddle
height specified in % won't work if the parent element does not have a height set explicitly, So you need to set height for html and body
float has no effect on absolute positioned elements
the selector #case-example-cover #case-right can simply be #case-right since id is unique in a document
HTML
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://s7.directupload.net/images/140625/yflekqdc.jpg" />
</div>
</div>
CSS
html, body {
height:100%;
}
#case-example-cover {
width: 100%;
height: 100%;
margin-top: 80px;
}
#nav-container {
position: relative;
width: 100%;
max-width: 980px;
}
#nav-container div{
position: absolute;
top: -webkit-calc(50% - 19px);
top: -moz-calc(50% - 19px);
top: -ms-calc(50% - 19px);
top: calc(50% - 19px);
width: 38px;
height: 38px;
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
}
#case-left {
left: 0;
}
#case-right {
right: 0;
}
#case-example-cover img {
width: 100%;
height: auto;
}
Demo
Update
For center aligning the icons container based on the image container that is of variable width, you need to position it absolutely relative to the image container and apply
top:0;
right:0;
bottom:0;
left:0;
to create a block, then apply margin:auto;
Then you can position the left and right icons inside it as mentioned above.
Demo
Side notes: the scroll is due to the borders i've added in demo since i can't see the images (maybe it's blocked in my network).
Move the image inside the container div. Also assign the top property like below.
HTML
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://s7.directupload.net/images/140625/yflekqdc.jpg"/>
</div>
CSS
#case-example-cover #case-left {
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
float: right;
height: 38px;
width: 38px;
position: absolute;
left: 0;
top:calc(50% - 19px);
}
#case-example-cover #case-right {
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
height: 38px;
width: 38px;
position: absolute;
right: 0;
top:calc(50% - 19px);
}
FIDDLE DEMO
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
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%;
}