I want to increase the distance between the border and the background-image ... I tried to add padding: 20px; but it doesn't work.
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width: 100px;
height: 75px;
display: block;
}
.Tab1:hover {
border: 1px solid green;
}
<div class="Tab1"></div>
You can increase the space between the border and the background image with padding and background-clip:content-box; (see MDN for more info).
Also don't forget to center the background image with background-position:center;
.Tab1 {
background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
width:100px;
height:73px;
display:block;
padding:20px;
background-clip:content-box;
}
.Tab1:hover {
border:1px solid green;
}
<div class="Tab1"></div>
If you also want to avoid the position snap on hover created by the border, you can add a transparent border and only change the colour on hover :
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat: no-repeat;
background-position: center;
background-clip: content-box;
width: 100px;
height: 75px;
display: block;
padding: 50px;
border: 1px solid transparent;
}
.Tab1:hover {
border-color: green;
}
<div class="Tab1"></div>
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat:no-repeat;
background-position:center;
background-clip:content-box;
width:100px;
height:75px;
display:block;
padding:20px;
}
.Tab1:hover{border:1px solid green;}
This is what you need, you first align the background to the centre of the box and then add a padding with the padding CSS, as you originally tried to do. The background-repeat property will stop the background repeating into the padding of the CSS.
Please also remember to add units to the padding value, just in case you had tried to do what you'd written as adding padding:20.
You can check here the space between image and border...
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width:100px;
height:75px;
display:block;
padding:15px;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
}
.Tab1:hover{border:1px solid green;}
<div class="Tab1">
</div>
thanks
css code
.Tab1 {
background:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
background-repeat:no-repeat;
width:100px;
height:75px;
display:block;
padding:15px;
}
.Tab1:hover {
border:1px solid green;
margin-left:-1px;
margin-top:-1px;
}
Related
The separator image isn't displaying on the right side of the input field. I tried using a plain border and with different positioning, as well as with an image as in my example, but it doesn't show.
PS. This is the seperator image:
jsfiddle
.ui-topbanner {
color:#000;
height: 31px;
background-color: #f2e9da;
border-bottom: 1px solid #d9cebc;
}
.ui-topbanner-title {
position:absolute;
top:5px;
left:4px;
height:26px;
line-height:26px;
padding:0 10px 0 25px;
display:inline-block;
color:#000;
border:1px solid #d9cebc;
border-bottom:none;
background-color:#fff;
font-size:.7rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-image: url(http://hardist.eu/public/img/icon_folderyellow3.gif);
background-position: 5px 5px;
background-repeat: no-repeat;
}
.ui-topsubbanner {
position:relative;
color:#000;
height: 30px;
background: -webkit-linear-gradient(top, #f7f1e8 0%, #f4ecdf 100%);
border-top: 1px solid #fff;
border-bottom: 1px solid #efe8da;
}
.ui-topsubbanner-wrapper {
padding:2px 3px 0 5px;
}
.ui-seperator {
width:2px;
height:17px;
display:inline-block;
background-image: url(../images/ui-seperator.png);
background-position: 0 6px;
background-repeat: no-repeat;
}
<div class="ui-topbanner"><div class="ui-topbanner-title">Test</div></div>
<div class="ui-topsubbanner">
<div class="ui-topsubbanner-wrapper">
<input type="text" class="input-search" placeholder="Search...">
</div>
<div class="ui-seperator"></div>
</div>
Check setting float property. It may help you.
.ui-topsubbanner-wrapper {
padding:2px 3px 0 5px;
float: left;
}
.ui-seperator {
width:2px;
height:17px;
display:inline-block;
background-image: url(http://i.imgur.com/ovVm6fW.png);
background-position: 0 6px;
background-repeat: no-repeat;
float: left;
}
The image is actually there, but it's hard to see because it's so similar in color to background and not where you expect. Because the topsubbanner-wrapper div is a block element by default, the separator was getting bumped to the beginning of the next line. I couldn't see it at all until I changed the background of the separator div to red for diagnostic purposes.
You can fix the problem by setting the display of the topsubbanner-wrapper div to inline-block, as you did with the separator, or by setting its float to left.
Is it possible to achieve this slanted sidebar layout with CSS? The right side would be the main content where I assume the slanted sidebar layout could overlap the extra. Thanks for reading!
Try something like this..
#shape {
border-top: 100px solid green;
border-right: 20px solid transparent;
height: 0;
width: 100px;
}
Fiddle: http://jsfiddle.net/3wLJj/1/
more info: http://css-tricks.com/examples/ShapesOfCSS/
If you are going to add some text, or elements inside the green div, it is better to do it this way than creating only a shape.
Fiddle
.main{
width:60%;
background:green;
height:400px;
position:relative;
color:white;
}
.main:after{
content:'';
position:absolute;
right:-40px;
border-top: 400px solid green;
border-right: 40px solid transparent;
}
.side{
margin-left:10%;
width:30%;
}
I'd like to produce a circle with the outer dashed border offset from the main circle. I've attached a pic for reference.
I have tried using box shadow to achieve this but no luck so far. Is there a way to do this?
I was able to get this effect by utilizing the pseudo-element selector ::before. (::after would work just as well)
Here is a DEMO
Given the element:
<div class="circle"></div>
Apply the following CSS rule:
.circle {
position: relative;
float: left;
border: 2px dotted black; /* This is the outer border (dotted) */
background-color: white; /* This is the color of the inner border */
padding: 10px; /* This is the size of the inner border */
border-radius: 50%;
}
.circle::before {
position: absolute;
display: block;
content: ' ';
background-color: #6abde7; /* This is the color of the inner circle */
width: 150px; /* This controls how wide the circle will be. Remember to subtract padding + border */
height: 150px; /* This controls how tall the circle will be. Remember to subtract padding + border */
border-radius: 50%;
}
You can adjust a few of the rules above. They are mainly there just to give shape to the circle for the demo. I've commented the ones that control the styles of the circle.
Explanation
You're basically adding an element inside of the container element via CSS. This won't work on elements that don't support content. (i. e. <input>)
DEMO
.circle {
height:200px;
width:200px;
border-radius:50%;
background-color:#cef;
border:3px dotted #000;
box-shadow:inset 0 0 0 10px #fff;
}
UPDATE
Using :after
DEMO
.circle {
height:200px;
width:200px;
border-radius:50%;
background-color:#fff;
border:3px dotted #000;
}
.circle:after {
content:' ';
display:block;
height:180px;
width:180px;
border-radius:50%;
background-color:#cef;
position:relative;
top:10px;
left:10px;
}
Is there a reason you can't have a second div, like so?
http://jsfiddle.net/gUYFF/1/
.outline {
float:left;
border: dotted 2px black;
width: 220px;
height: 220px;
border-radius: 110px;
box-shadow: 0 0 0 10px white inset;
}
.circle {
background-color: #6abde7;
width: 200px;
height: 200px;
border-radius: 100px;
margin:10px;
}
<div class="outline"><div class="circle"></div></div>
I am making one div in that I want to align image on right of that div and fill up color of same image on other remaining free place of div but image is not aligning right to it.
The main problem is that I don't want to use <img> tag inside div, I want to to use image as background image of that div and that also should be right align.
My Fiddle
code :
<div class="inq_parent">
<div class="inq_header">
</div>
</div>
.inq_parent
{
height:560px;
width:90%;
background-color:#000;
margin-left:5%;
}
.inq_header
{
height:100px;
width:100%;
background-color:#333333;
border-bottom: 1px solid #f2f2f2;
background-image:url(http://i.stack.imgur.com/x9be2.png);
background-repeat:no-repeat;
text-align:right;
}
Add background-position:right;
.inq_header
{
height:100px;
width:100%;
background-color:#333333;
border-bottom: 1px solid #f2f2f2;
background-image:url(http://i.stack.imgur.com/x9be2.png);
background-repeat:no-repeat;
background-position:right;
text-align:right;
}
or in short
background:url(http://i.stack.imgur.com/x9be2.png) no-repeat right;
DEMO
Updated
.inq_header
{
height:100px;
width:100%;
border-bottom: 1px solid #f2f2f2;
background:#333333 url(http://i.stack.imgur.com/x9be2.png) no-repeat right;
}
Updated DEMO
If I use box-sizing: "border-box" for images the images will get smaller, like on hover: Example JsFiddle
Is it possible to do the same effect without the image getting cropped?
Solution #1 Outline property. Try to use outline instead of border with negative outline-offset value equal to outline width:
img:hover {
box-sizing:border-box;
outline: solid 10px #f80;
outline-offset: -10px;
}
http://jsfiddle.net/dfsq/BPRyZ/2/
Also since IE does not understand this property you can leave box-sizing to be used by IE8+.
Solution #2 Using div as wrapper + :after:
<div class="img-wrap">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>
CSS:
.img-wrap:after {
border: 0;
}
.img-wrap:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: solid 10px #f80;
}
http://jsfiddle.net/dfsq/BPRyZ/7/
The question you need to answer is, do you want the image itself to be 200px, or the entire box to be 200px. There are 4 different ways to code this depending on your answer to the previous question...
If you want the entire box to be 200px wide, then you can use border-box with the following code...
http://jsfiddle.net/BPRyZ/8/
img {
width:200px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
If you want the entire box to be 200px wide, then you could also use this code...
img {
width:180px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
If you want the image itself to be 200px, then you need this code... (this means your total box width is actually 220px)
img {
width:220px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
For the above you could also use...
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
I updated your jsfiddle
CSS:
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
width:220px;
}