I have a gif animation of a logo that shows the animation once when you open the website.
Now it should load that same gif again when you hover over it, making it animate again (the gif itself has just one animation cycle).
#logo a.logo {
display: inline-block;
width: 115px;
height: 115px;
background-image: url("../img/uf_logo_animation.gif");
background-size: 115px 115px;
background-position: 0px 0px ;
background-repeat: no-repeat;
}
#logo a.logo:hover {
background-image: url("../img/uf_logo_animation.gif");
}
That code doesn't work - it doesn't make the animation play again. How can I do that?
I want an Image to disappear and another to appear at the same place with same size on hover. Therefor I hide the orignal image and create a background image instead. The problem: The background image does not auto scale. If I dont set a specific height it has no height (means no image visible).
You can see the problem here if you scroll down a bit: https://www.ergotopia.de/
My current CSS:
.bestsellerkissen:hover .hoverkissen{
background: url(example.jpg) no-repeat center;
height: 240px;
background-size: 100% 100%;
display: block;
border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{display:none;}
Use opacity instead of display on image. Then you don't need to set height:
.bestsellerkissen:hover .hoverkissen{
background: url(example.jpg) no-repeat center;
background-size: 100% 100%;
display: block;
border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{
opacity: 0;
}
UPDATE
Here is a jsFiddle with the image and hover event.
I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.
I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?
I do have a containing a tag. I am able to increase the clicking area of the buttons by padding the a tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.
img.prev{
background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
}
img.prev:hover{
background-position: 0px -60px;
}
img.next{
background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
}
img.next:hover{
background-position: -30px -60px;
}
OK - I think I've got an answer. It seems I can increase the padding of the containing a tag to increase the clicking area and then use the hover event of the a tag to set the background for the img. The following css is for the containing a tags.
Please let me know if there is a better or another solution.
#a-next{
padding-left: 30px;
padding-bottom: 200px;
}
#a-prev{
padding-right: 30px;
padding-bottom: 200px;
}
#a-next:hover > img{
background-position: -30px -60px;
}
#a-prev:hover > img{
background-position: 0px -60px;
}
the pseudo will do . https://jsfiddle.net/mgggf5vo/6/
catch hover from the link, so it includes the pseudo area.
Te correct attribute for links is title, not alt.
a {
display: inline-block;
position: relative;
vertical-align: middle;
cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
content: '';
position: absolute;
height: 60px;
width: 50px;
margin-left: 29px;
}
a[title="next"]:before {
right: 29px;
}
img.prev {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.prev {
background-position: 0px -60px;
}
img.next {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.next {
background-position: -30px -60px;
}
<div>
<a title="prev">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
</a>
Something Here
<a title="next">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
</a>
</div>
I just trying to put a background color (rgba) with an image, but doesn't work.
My CSS is:
section{
width:100%;
height:400px;
background: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
}
I just trying to put with diferent positions, like background-image, or just background, but doesn't work.
As I pointed out in comments, background color behaves as a fallback for the background image, unless the image is transparent:
section {background: rgba(0,0,0,0.5) url(../img/background2.png) 0 0 no-repeat;}
If you want to cover the image by an overlay layer (using rgba()), you can create a pseudo-element and position that as absolute the use left, top, right and bottom properties to expand the overlay, as follows:
.box {
background: url(http://lorempixel.com/500/500) no-repeat center center;
position: relative;
}
.box:after {
content: ' ';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0; /* Fill the entire space */
background-color: rgba(0,0,0,.4);
}
WORKING DEMO.
Does it have any content?
If so, you can use z-index property to move the overlay beneath the content which is wrapped by a relative positioned <p> element with a higher z-index value, as follows:
<section class="box">
<p>Content goes here...</p>
</section>
p {
position: relative;
z-index: 2;
}
.box:after {
content: ' ';
position: absolute;
z-index: 1;
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0,0,0,.4);
}
UPDATED DEMO.
Use transparent PNG as a background image and then you can see both color and image together.
section {
width:100%;
height:400px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-repeat: no-repeat;
background-size: contain;
background-color: rgba(0, 0, 0, 0.5);
}
You can use rgba within the same declaration
DEMO http://jsfiddle.net/b6vzN/1/
background:url(../img/background2.jpg) no-repeat rgba(0,0,0,0.5);
If you wish to assign it seperately as in your example then you need to specify background-image, not just background
background-image: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
I have a footer that is 1024px in width with a background image 1024px by 482px.
I want to put an x-repeating background to the left of it and an x-repeating background to the right of it. How do I do this?
This is what I have:
.footer {
background:
url("footerleft-bg.png") repeat-x,
url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}
But it makes the left background image completely cover the right one.
You could do it like this:
demo
footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 10em;
background: black;
}
footer:before, footer:after {
position: absolute;
top: 5%; bottom: 5%;
width: 40%;
background-repeat: repeat-x;
background-size: 1px 100%;
content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }
However, there is no way to do it without using nested elements or pseudo-elements. A background repeats itself or it doesn't. It doesn't repeat itself just on an interval from point A to point B (though I would sometimes find that useful as well).
CSS2 does not support multiple background images. You'll need to nest another HTML element to make this work.
See: http://www.quirksmode.org/css/multiple_backgrounds.html