I am trying to create a transparent border for my image and place it over the image using CSS.
For example please see the image below:
To achieve this I tried the following code but I am facing the following problems:
The border is not over the image; its around the image and not allowing the image to fit 100% inside the parent div
To Make the border transparent I used "opacity" but its making the image transparent too which I don't want.
You can check the code live here: http://jsfiddle.net/6GK45/
I could create a div and made the border color transparent and then place it over the image but the problem is the width of my image is fixed (277px) but the height is not. So this will not work for me.
Could you please tell me how to create the transparent image border and place it over the image just like in the image above.?
HTML:
<div class="box" >
<img class="lightbox" src="myimage.jpg" />
This is text
</div>
CSS
.box {
width:277px;
background:#FCFBDF;
}
.lightbox {
border: 5px solid red;
z-index:999;
opacity:0.3;
}
img {
width:277px;
}
How's this - it uses :after to create a pseudo-element which places the border on top of the image, not outside it. http://jsfiddle.net/6GK45/8/
.imgWrap:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
opacity:0.5;
border:5px solid red;
}
UPDATE: If it's important to preserve the ability to right-click on the image, you can do it like this with an additional wrapper: http://jsfiddle.net/6GK45/24/
For anyone still googling for this: It is possible to achieve this effect with CSS only by using the outline property:
img {
outline: 15px solid rgba(255, 0, 0, .75);
outline-offset: -15px;
}
<img src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-0F79C42300000578-201_634x429.jpg" width=250 />
As Donovan said, rgba for the border-color – but the border on an element containing the image, and then the image “pulled” outwards under the border using a negative margin and z-index – like this, http://jsfiddle.net/6GK45/7/
<div class="box" >
<span class="lightbox"><img …></span>
…
</div>
.lightbox{
display:block;
width:267px;
border:5px solid rgba(255,255,255,.75);
}
.lightbox img{
display:block;
width:277px;
margin:-5px;
position:relative;
z-index:-1;
}
If you want a border with opacity, you can use RGBA code. The 'A' signify alpha, so you can modify opacity.
border: 5px solid rgba(255,0,0, 0.3) ;
You can use z-index to put your box with border above your image if you put image and box in position absolute, relative.
I updated your fiddle. http://jsfiddle.net/6GK45/21/
What you need to do is set the image as the background of the parent div and then adjust the width/height of the child div to hug the image accordingly.
//make js fiddle work
Related
I'm using css3 PIE in order to create circle through border-radius(in IE8). It is working fine normally.
but when i'm trying to change the background color of circle, that element is turning into square.
my code looks like this.
.menuIco {
width:16px;
height:16px;
border-radius:8px;
position:relative;
z-index:101;
background-color:#38B6E7;
}
.active .menuIco {
background-color:#F1F1F1;
}
my html looks like this..
<div> <!-- i am adding .active class to this div using jquery -->
<div class="menuIco"> </div>
</div>
when i add active class to parent div(using Jquery dynamically) the menuIco (circle) should change its color. But the border-radius property is collapsing.
can anyone help me how to fix this!
Thanks in advance.
Set your border-radius to 100%.
Here's a LIVE DEMO for you to see.
.menuIco {
width:100px;
height:100px;
border-radius:100%;
position:relative;
z-index:101;
background-color:#38B6E7;
}
I have made the width and height to 100px so as to show it on a larger scale. (this can be resized as necessary)
EDIT
Depending on your browser, you should look to include the other prefixes, is shown in this fiddle
the border radius is defined by:
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
I've got two divs, the outer and the inner div. I have a background image and the outer div has an opacity set however i just cannot seem to get the inner div to not inherit the opacity of outer div. i would like the inner div to be a solid colour.
my code is below and a jsfiddle here: http://jsfiddle.net/3TK3U/
<style type="text/css">
body
{
background-image:url('http://media-bubble.info/images/layout/background.png');
}
.outsideBox {
width:70%;
height:200px;
background-color: #ffffff;
opacity:0.7;
filter:alpha(opacity=70);
text-align:center;
}
.insideBox {
width:40%;
height:80px;
background-color: #999;
z-index:999999;
}
</style>
<div id="Introduction" class="outsideBox">
<div id="Introduction" class="insideBox">This is the inside box which should not inherit transparancy</div>
</div>
Try using
background-color: rgba(255,255,255,0.7);
with no opacity or filter that should make the background transparent but not effect the contents of the element.
This is an old question but still comes up in a search so an update to highlight that you can also set the opacity with hex colour values too (not sure when this was introduced or how far back compatibility is across browsers).
For example if you have a background colour like this:
background-color: #5D5C61;
you can set the opacity by adding two hex digits to the end:
background-color: #5D5C61F5;
The range is 00 (fully transparent) to (FF).
It avoids having to convert to RGB if you don't want to in your page or app.
.outsidebox {
//Add your other properties as needed
background-color: #5D5C61F5;
}
.insidebox {
//No opactity needed here if you don't
//want it transparent.
//Add your other properties as needed
background-color: #1F2833;
}
body {
background-image: url('cloud.png');
background-color: rgba(255, 255, 255, 0.6);
}
I tried using the above to produce a semi-transparent white background above a background-image. It doesn't work, only the background image is shown and the background-color appears to be ignored. How can I adjust the opacity of a body background image?
You can use the css "before" pseudo class to create the white overlay and place before all the content in your DOM. Add z-index:-1 to ensure it doesn't sit on top of other elements:
body {
background: url("image.jpg");
}
body:before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
jsfiddle
background-color is placed underneath background-image, not above it (when rendered in the web-browser). To put a semi-transparent white block over an image, you will need to place another different HTML element on top of it with background-color.
I've done this using two separate images when announcing a special sale. One is the permanent image in the background and the other is a temporary sale image with semi-transparent background floated over the other image, that can be easily removed after the sale is over. The main div holding the background image needs to be Position:relative so you can position the semi-transparent image with position:absolute over the other image.
Here is the HTML:
<div class="tempsale" >
<img src="images/ULR FOR YOUR BANNER GOES HERE.jpg" width="800" height="100" border="0" alt="banner">
<div class="tempsaletext">
<img src="images/URL FOR YOUR TEMPORARY SALE GOES HERE.jpg" width="500px" height="80px" alt="Sale">
</div>
</div>
Here is the CSS:
.tempsale {
text-align:center;
position:relative;
}
.tempsaletext {
positon:absolute;
top:10px;
left:20%;
}
For more info, see full instructions here.
I need to figure out how to overlay an image of my logo on top of another repeating image that is being used as a background for the nag bar at the top of my site.
The CSS for the nag bar image looks like this:
.header {
background:url(../images/bg-header.jpg) repeat-x;
height:125px;
is there a way to add another image on top of this and have it aligned to the left side of the underlying image?
Something like this?
http://jsfiddle.net/aJEwZ/
<style>
.nav {
background: url(http://www.psdgraphics.com/file/light-wooden-background.jpg) repeat-x;
height: 250px;
width: 500px;
border:1px solid black;
}
img {
padding:20px;
}
</style>
<div class='nav'>
<img src="http://a.deviantart.net/avatars/h/a/haz-elf.jpg?1" />
hello</div>
Here you go.
here's a DEMO
and here's the CODE
Here's the css
.header {
background: url("http://fc04.deviantart.net/fs70/i/2013/266/7/3/sydneigh_logo_by_robberbutton-d6nmaox.png") top left no-repeat ,url("http://subtlepatterns.com/patterns/sandpaper.png") repeat-x;
background-size: 571px 125px, auto;
height:125px;
width: 100%;
}
notice how the background attribute has two shorthand backgrounds with images written out seperated by a comma. The first image is on top of the second image and so on.
The first property of attribute background-size only applies to the first property in the background attribute (the first image in the declared background attribute.) The second applies to the second image in the background attribute.
This works the same way with other background-properties such as background-repeat, and background-image.
Here's an article on having multiple background images:
http://www.css3.info/preview/multiple-backgrounds/
We all know that
border-bottom: 2px solid #000;
will make the bottom border 2px thick and color will be black
but can we do any such thing like for the border bottom we can set an image
that means a thin horizontal image will be the bottom-line border of the div??
thanks in advance
border-image, might be what you seek, but it`s CSS3. See http://www.w3schools.com/cssref/css3_pr_border-image.asp .
I would set positon:relative; on the container <div> and use position:absolute; bottom:0; for your <img /> inside the container.
You can emulate the image border-bottom by setting the image by something like
background: url(...) bottom repeat-x;
or
background: url(...) bottom no-repeat;
background-size: 100% 3px;
Unlike the actual border-image, this will work in IE (IE7+ for the first example, IE9+ for the latter one).