I have tag with 25px padding and 15px border from left. And I am using arrow background image in it. Is it possible to show this background image above the border?
Here is HTML
<a id="arrow">List</a>
CSS
a#arrow {
background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
}
Here is jsfiddle link
You can put your background to the :after element as a method
CSS
#arrow:after {
content:'';/*enable after element*/
position: absolute;
top: px;/*position of the background*/
left: px;/*position of the background*/
background: url(img/your-bg.png) no-repeat;
width: px;/*width of the background*/
height: px;/*height of the background*/
}
And dont forget to add position:relative to the #arrow
You can use background position to view your image.
here is fiddle
Your css should be
a#arrow{ background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
background-position: -36px;
}
Use background-position property with values in pixels to show them on top.
For instance,
background-position: xxpx (for left-right) xxpx (for top-bottom);
PS: xx is a dummy value, which you can replace with actual numbers.
Related
So at the moment, I've got a div behind a link, I've set the div background to be a specific image, and I'd like the same image to appear when hovering over that div but a shadow appears around the inside of the box, I have both images with me, but I can't seem to find a way to keep the "Home" background image the same as the "Home:hover" background image but with the shadow box too, I'd like to do this without having to individually place the shadow onto the background image in photoshop.. any thoughts?
Here's the CSS:
#Home {
z-index: 4;
position: absolute;
top: 0px;
left: 707px;
width: 95px;
height: 64px;
margin: 0;
background: url(../images/button%20texture%20b.jpg) center;
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
}
#Home:hover {
width:95px;
background: url(../images/button%20overlay%20b.png) ;
background-size: cover;
}
.
#Home:hover {
width: 95px;
background: url(../images/button%20overlay%20b.png) center, url(../images/button%20texture%20b.jpg) ;
background-size: cover;
}
Thanks!
I would recommend using this code:
#Home:hover { background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left; }
As you can read here, you can actually assign multiple background images to an element. The first image stated will be on top, the second below the first image and so on.
I am trying to make a very simple gray background bar on the page. The bar should be 81 pixels from page top and height of the bar should be 71 pixels.
I can do this with an image file and background-repeat:x. Such as demonstrated here: http://jsfiddle.net/G29vE/ or the code below (image file removed):
body {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,...');
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
But it seems unnecessary to include (or link to) the image file. I wonder - and am asking - if this could be done pure CSS (or CSS3)? I could not find an answer or similar example from Google or SO.
You can use linear-gradient() for the bar color and use background-size to limit its height:
body {
background: linear-gradient(to bottom, #dfe0e1, #dfe0e1) 0 81px / 100% 71px no-repeat #fff;
}
You can just create a div and style it as you want:
HTML
<div class="bar"></div>
CSS
.bar {
width: 100%;
height: 71px;
background: #DDD;
margin-top: 81px;
padding: 0px;
}
Fiddle Demo
Try adding a Div with a z-index.
This div can you give it's own css style
Simply placed a div with id or class..
<div id="topbar"></div>
and placed css code in stylesheet
#topbar { position:absolute; z-index:9; height:71px; top:81px; left:10px; right:10px; background:#ccc; }
this not only float you div as a top bar but also extend to you browser 100%.
Im trying to make a 960px, float left website and using black transperent divs with text in them. The problem is that the text has the same color as the div, but I want it to be white or at least not the same as the div. How can i do this?
This is my CSS for the moment, the problem is that position is set to relative, but I just want to use diferent divs and use "float: left". If I remove "position: relative" the transparent color of the div disappears.
.content {
position:relative;
color:White;
z-index:10;
float: left;
text-align: center;
left: 365px;
font-family: Arial;
margin: 10px;
top: 15px;
}
.background {
position:absolute;
border-radius: 10px;
width:960px;
height: 70px;
background-color:Black;
z-index:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:.5;
top: 80px;
}
Use transparent background instead with:
background:rgba(0,0,0,0.5);
The content inherits the opacity of your container. Explicitly set the opacity of the content to not be .5 but 1.
This seems to be working fine, see the fiddle and tell me if it's working for you. I've changed the width to % but it works just as well on px, ijust wanted to remove the scrolling in the fiddle, and changed the Color:White; to color:#fff;
Fiddle
I'd like to have a thin "shadow" line between my DIVs, as separator. Since I'd like the shadow line to be thiner and with more opacity at the top and at the bottom, I have created 3 images: middle shadow, top shadow and bottom shadow. Problem: I don't know how to place the "top shadow" image at the top of "middle shadow" and "bottom" shadow at the bottom (without multiple DIVs). I'm attaching an image done in fireworks where you can see and example of the shadow line.Many tks
div#content-center {
overflow: hidden;
background: khaki;
background: transparent url('images/middle_shadow.png') repeat-y top left;
padding: 0px 0px 0px 50px;
}
You also might be abel to do this with the :before and :after psedo-elements. Read up on them here if you aren't familiar.
#content-center{
background: url('images/shadow_repeat.png') center right repeat-y;
}
#content-center:before,
#content-center:after{
content:'';
display:inline-block;
position: absolute;
background-repeat: none;
/*size these to be what you need*/
height:100px;
width:100px;
}
#content-center:before{
top:0;
background-image: url('images/shadow_top.png');
}
#content-center:after{
bottom:0;
background-image:url('images/shadow_bottom.png');
}
Give multiple backgrounds:
background: url('images/middle_shadow.png') top left, url('images/middle_shadow2.png') center left,url('images/middle_shadow3.png') repeat-y bottom left;
Im able to give the start position of an background image. But if i give positions for solid fill background its not working.
Here is the js fiddle for that.
http://jsfiddle.net/yPVJE/
So can we set the start position and the size of an solid fill backgrounds?
Thanks!
I would take a similar approach to StuR, but using background position instead of gradient points. You can then set your background position as you would usually.
div {
background:linear-gradient(left, #000, #000) no-repeat 50px 50px;
}
This is one way to offset a solid background color, using a linear gradient with a transparent colour for the first x number of pixels:
.offset {
background-image: linear-gradient(left, transparent 300px,rgba(39,39,39,.5) 300px, rgba(39,39,39,.5) 100%);
width: 100%;
height: 500px;
}
Here's a demo on JSFiddle.
You can not offset a background color. Only background images have a position.
If you can make a ::before pseudo element with bg color, height and width and just offset it from its parent, you'll have complete control of its appearance. Much easier than putting a border in the pseudo element:
/* adding a ::before element with bg and border radius to create a
cropped circle to overlay parent bg image's blue right end */
.myElement::before {
background-color: #fff;
content: "";
margin: 0 auto;
position: absolute;
top: 43px;
right: 0;
width: 300px;
height: 201px;
z-index: -1;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
Yes, with linear-gradient it works:
div { background-image: linear-gradient(transparent 10px, grey 10px); }
Watch out for improper alignment when linear-gradient points are used.
Here's a better approach:
background: linear-gradient(#6699cc, #6699cc);
background-size: auto 4em;
background-repeat: no-repeat;
It uses linear-gradient just to generate solid color, which is then resized to reflect the covered area size.
Also background-position could be used as needed, for example:
background: linear-gradient(#6699cc, #6699cc);
background-size: calc(100% - 30px) auto;
background-repeat: no-repeat;
background-position: right;
In the last example, the background color would 'start' 30px from the left of the div.
Further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
You can use background-size instead of background-position to restrict the colored area:
// randomly set background size every 1 second
var elm = document.querySelector('div');
window.setInterval(()=> {
var randomValue = Math.random()*100;
elm.style.backgroundSize = randomValue + '%';
}, 1000)
div {
height: 100px;
border: 1px solid black;
transition: .4s ease-out;
background: linear-gradient(to right, black, black) no-repeat;
background-size: 0; /* <--- starting from 0% */
}
<div></div>
Another way to accomplish this would be to add a pseudo-element to the div element like so:
div {
::before {
border-top: 10px solid #0066a4;
content:"";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 12px; left: 0; right: 0; bottom: 0;
z-index: -1;
}
}
See this CodePen by Eric Rasch for a working example: https://codepen.io/ericrasch/pen/Irlpm
You can achieve this by having the parent element and child element position: relative;. Next, you can just go in and set offsets. There are a few other ways to achieve this but this is one of the many takes.
SCSS:
HTML:
EXAMPLE:
Note this might have side effects for buttons and links. Test it for your use case. Good luck!
Happy Coding