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.
Related
Is it possible to blend the iterations of a single background-image when background-repeat is set to repeat like so:
Solutions using javascript are also welcome.
Thanks in advance
You would need 2 images for this.
one that tiles seamlessly
and the starting top image which doesn't tile.
Your element will use the tileable one as its background. The background position Y should be the height of the non-tileable one.
You can then add a pseudo element ::before on top of your element positioned to the top which has the background of your non-tileable image.
div
{
position: relative;
width: 813px;
height: 2000px;
border: 3px solid red;
background-image: url(https://i.imgur.com/joeNpq8.png);
background-repeat: repeat-y;
background-position: 0 682px;
}
div::before
{
content: '';
width: 813px;
height: 682px;
background-image: url(https://i.imgur.com/iYgZFsw.png);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
}
<div></div>
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.
Is this even possible?
I have a box and want to add one background image over the other. But i want to add an opacity 0.5 just
for the top image.
You can do it with pseudo element:
#example1 {
position: relative;
width: 500px;
height: 250px;
background: url(http://goldenageofgaia.com/wp-content/uploads/2012/09/Field-flowers-image7.jpg) 60% 60% no-repeat;
}
#example1:after {
content: "";
position: absolute;
top: 10%;
left: 10%;
opacity: .7;
z-index: 10;
width: 100px;
height: 100px;
background: url("http://www.butterflyskye.com.au/Monarch%20Butterfly%202.jpg");
}
http://jsfiddle.net/Let8U/
Check out: http://www.css3.info/preview/multiple-backgrounds/ It would help somewhat.
#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
As you can see in the example given, there are two images - one center bottom and the other top left. For Opacity, I would do that in the image editor if I wanted to layer backgrounds.
There's no way to change a background-image's opacity.
What you can do is add an extra element with the desired opacity and background on top of your box.
This snippet on CSS-Tricks shows an elegant way of doing this with pseudo-elements, so you don't need to clutter your markup to achieve the effect: Transparent Background Images
Hope it helps.
How to create background like this in css(middle and last block has fluid height):
Are there any good tutorials?
You would make the top and bottom div elements and set their css as follows:
#topBGDiv
{
width: 100%;
height: 125px; // Make this the height of the background image in pixels
background-image: url('dark-gray-ribbon.jpg');
background-repeat: repeat-x;
overflow: hidden;
}
#bottomBGDiv
{
width: 100%;
height: 110px; // Make this the height of the background image in pixels
background-image: url('light-gray-ribbon.jpg');
background-repeat: repeat-x;
overflow: hidden;
}
use an image like this for the background image of the top:
and one like this for the bottom:
Lastly, set the CSS for the page's background-color to be the middle color. So, something like this:
body
{
background-color: #C0C0C0;
}
You can write like this:
#top,#bottom
{
height: 110px; // Make this the height of the background image in pixels
background: url('BG.jpg') repeat-x left top;
}
#bottom
{
background-position:left bottom;
}
I can position a small background-image/icon 4 pixels from the center left of its container with:
background: url(...) no-repeat 4px 50%;
How can I position it 4 pixels from the right?
Depending on your situation and what browsers you want to support, this works (tested on IE7-8, Firefox):
background: url(...) no-repeat right 50%; border-right: 4px solid transparent;
Of course, if you are already putting a border on the right, this will not help you at all.
Added on edit: If the above doesn't work because your are using the border, and you don't care about IE7 (not sure we are quite at that point yet), and your "icon" width is known, then you could do:
.yourContainer {
position: relative;
}
.yourContainer:after {
content: ' ';
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 4px;
width: 10px; //icon width
z-index: -1; //makes it act sort of like a background
background: url(...) no-repeat right 50%;
}
CSS3 adds a new way to specify background-position:
background-position: right 10px top 50%;
Should position the background-image 10px from the right and vertically centered.
how about
background: url(...) no-repeat right 50%;
padding:0px;
padding-right:4px;
in the case you ever want a border
I'm afraid you can't as far as I know.
Popular tricks:
Adding a 4px transparent margin to the image and giving
it background-position: right
Adding a 4px margin-right to the element (works in some situations, doesn't in others)
Using jQuery to determine the element's weight and adjust the image position (yuck!)
You might want to use percentage:
table.dataTable thead .sorting_asc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat 30% 50%;
}
table.dataTable thead .sorting_desc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat 30% 50%;
}
table.dataTable thead .sorting {
background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat 30% 50%;
}