I want to align the top of a background image with the bottom of an element using CSS (so that I can make it transition in upon hover or in an animation, in case you were wondering). This element does not have a set height; I don't know what the height of the element is. Does anybody know how to do this? The solution does not have to be IE compatible; it only has to work in the latest versions of Chrome and Firefox.
EDIT: I'll award the bounty to an answer that also works for the <body> element if there is such an answer by the time that the bounty ends.
Sorry about the trouble. Gotta love CSS right? Anyhow I have two solutions for you: One just stays within the realms of using background positioning and achieves it... for the MOST part; The other one goes outside of the immediate solution, adds just a little bit extra, but is rock solid and works with any height at all. Both work with any width.
So the first one:
This works by setting the background-position to the keyword value center for the xpos and the percentage value 1000% for the ypos. Of course the % value can vary, but I just went with 1000% to be safe. In reality you could make this just big enough to push it off screen. But here's the fiddle:
http://jsfiddle.net/D5QME/
The problem with this one is that if you make the height of the parent element the exact height of the background image... it quits working. And if the height of the parent element shrinks below the height of the image, it reverse the pattern. So if you're confident that the parent element will always be taller than the BG image, this is pretty solid.
Now the second one:
This one is straight up rock solid but adds an extra element. This extra element can either be a placeholder element, like a div or whatever, or just the straight img itself. This:
1) Uses position: relative and overflow: hidden on the parent to turn it into a container
2) Uses position: relative, margin: 0 auto, and top: 100% to position the image in the center and push it just below the parent
3) and uses .parent:hover .backgroundImage to make the image transition to top: 0% when the user hovers over the parent element.
Here's the fiddle:
http://jsfiddle.net/Fwf6p/
Even though this adds an extra element, it is pretty rock solid.
Anyhow, hope this helps!
-J Cole Morrison
Another modification of J Cole's answer, but seems to work with the body tag. May also work with Hephistocles modification but haven't tested that.
CSS:
.example{
border: 1px solid red;
/* Change the height to anything you want! */
height: 400px;
/* Change the width to anything you want! */
width: 500px;
position: relative;
}
.example:hover .backgroundImage{
height: inherit;
top: 0%;
}
.backgroundImage{
background: url("http://img.gadgetian.com/Angry-Birds-Space-021-300x300.png") no-repeat top center;
position:relative;
margin: 0 auto;
top: 100%;
-webkit-transition: 1s ease all;
-moz-transition: 1s ease all;
transition: 1s ease all;
height: 0px;
}
HTML:
<body class="example">
<div class="backgroundImage"></div>
</body>
JSFiddle
To take J Cole's second answer a bit further - if you want to avoid inserting an extra element you could always use pseudo-elements. For example:
.myElm {
position: relative;
overflow: hidden;
}
.myElm:after{
content:"";
background: url("myimage.png") no-repeat top left;
top:100%;
position: absolute;
}
.myElm:hover:after {
top:0;
}
If you know the height of your element in pixels, you may be able to set its background position to be: background-position:0 npx;. Not sure otherwise. If there's a maximum height, you could always just use that. Or have a reasonable estimate/limit. The transitions may not 'ease' very uniformly, however.
There was an excellent JSFiddle in another answer just now, but it's been deleted :(
Related
I've been building a website in Safari, and I've just tested it in Firefox and my fixed navigation elements are behaving as if they're position is absolute.
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
This is the CSS I have for the primary navigation wrapper (it's a bottom nav.). In Webkit, it works perfectly: that is, it sticks to the bottom of the window regardless. In firefox, it positions itself at the end of the tags, so, for example, on a long page, I'd have to scroll down just to see it. It is acting as if it's absolute.
I also have a sidebar navigation.
.slidebar {
display: block;
position: fixed;
left: -1px;
top: -1px;
width: 1px;
height: 100%;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 99998;
}
This sidebar is also acting as if it's absolute - that is, it is positioning itself off the screen properly, but it's elongating <body> and thus the horizontal scrollbar appears. The height: 100%; is also responding to the <body> height and not the window height, so, for example, my <header> has a top margin of 20px, and the slidebar observes that margin too (the body has 0 margin). Likewise, instead of the height: 100%; ending at the bottom of the window, it ends at the bottom of the <body>, factoring in the footer's bottom margin.
I cannot understand for the life of me why this is happening. Element inspection shows all the properties are loading fine, and in Chrome and Safari it works. It worked initially, and it worked the last time I even edited either navigation, but it has since stopped working since I built other, irrelevant, parts of the site.
http://www.upprise.com/demo.php - click the Envelope icon to see the sidebar
I had the exact same problem, turns out the following CSS property of a parent element was causing the problem.
transform: translate3d(0px, 0px, 0px);
Through the process of elimination I was able to determine that having the following in my body was causing all the problems with fixed divs in Firefox:
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
I had originally added this code to prevent flickering in certain CSS transitions throughout the site, but I guess I'll have to add it to each individual class now.
It appears that some browsers will will apply fixed positioning relative to the window, while Firefox is applying it relative to the <body />. You need to make your body 100% tall:
body {
height: 100%;
}
But the margin from your .header is collapsing outside of the body element. Change this:
margin: 25px auto;
to this:
margin: 0 auto; /* updated - thanks JoshC */
padding: 25px auto;
I solved the issue by moving the element that uses position: fixed; out of its original parent element that uses transform: translateX(-50%);.
Thus...
<div class="transformed-container">
<div="fixed-element"></div>
</div>
...became...
<div class="transformed-container"></div>
<div class="fixed-element"></div>
Two things led me to this conclusion:
#Pankaj's answer shows that the translate value can cause an issue.
#Wildhoney's comment to another answer references an explanation of the underlying cause: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
The problem seems to be in your body, i've added width:100%; height:100%; and overflow:hidden; to it in my fire fox and it looked just fine, except for the bottom menu-bar that went half of it's height over the bottom.
Not sure why the browsers were rendering differently, though the solution is pretty simple. You need to give the parent elements (html/body) a height of 100% in order to fill the entire page. It seems like FF rendered the fixed elements at the bottom of the contents as opposed to the bottom of the window. Adding the following will make it work across browsers:
html, body {
height: 100%;
}
In addition, you should also use padding on .header element as opposed to a margin. This will solve another issue.
.header {
margin: 0 auto; /* use a value of 0 rather than 25px */
padding: 25px 0;
}
I tested all this in the browser, it will work in FF now. It should also render properly in Chrome and others.
I needed to remove some css classes from the superior container of the fixed-on-scroll element that had a transition, from the animateCSS library.
$(window).on('scroll', function () {
if (distance <= 65) {
$('#my-contaniner').removeClass('animated fadeInLeft'); //delete problematic classes for FF
Add your code
});
Maybe it helps
After 5 hours of debugging, if you are using tailwindcss and you have drop-shadow-* (pay attention it's not shadow-*) class on one of your parent elements, it will cause the fixed elements within that element to act like they're absolute positioned.
Not sure why that is happening, maybe due to fact that tailwindcss is using lots of combined CSS variables.
Here's an example of what gets generated with tailwindcss drop-shadow-* utility, seems like filter property on one of the parent elements causes the same unexpected behaviour as transforms:
.drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
filter: var(--tw-filter);
}
I have a div within a div. I want one to extend out of the shell div so it resembles a tab. I thought just using absolute positioning with a negative value would push it out of the parent div. That doesn't seem to work. Is there a CSS work-around?
Example
http://jsfiddle.net/W3CyT/
http://jsfiddle.net/iambriansreed/W3CyT/4/
CSS
#sideWall {
height:100px;
width:100px;
position:absolute;
top: 10;
left: 10;
background: black;
margin-top: 60px; /* give room for tab */
}
.showSideWall {
height: 60px;
width: 30px;
position: absolute;
top: -60px; /* move tab above container */
right: 0;
background: red;
}
You're doing it correctly, however, you need to rethink your values for bottom and right.
If you're looking to have the red box protrude from the black box on its right side, consider removing right:0 and applying left:100% instead. This approach guarantees that no matter how wide the black box and red box are, the red box will always be on the outside to the right; they are width-size agnostic. This can be ideal because you may want to change the size of either box dynamically or in the future (it doesn't lock you in to hard set values).
Here's a fiddle of what I'm talking about.
You could use a Z-Index and position one on top of another. There is a better way to do it with Twitter bootstrap code.
http://twitter.github.com/bootstrap/
they give you templates for all kinds of cool features
How can I do this:
an image
a simple small DIV on top of the image, centered vert/horiz, which doesn't appear until the image is rolled-over
Try this:
<div style="position:relative;top:0;left:0;">
<img src="path/2/img.png" style="z-index:1;"
onmouseover="document.getElementById('hidden').style.display='block';">
<div id="hidden" style="display:none;position:absolute;z-index:10;"></div>
</div>
If it works for you, clean it up before you deploy it! :)
NOTE: div#hidden is not yet centered over the image. If you know the width and height of it in advance, you can use this method:
#hidden {
top:50%;
left:50%;
margin-top: -(heightOfHiddenDiv/2)px
margin-left: -(widthOfHiddenDiv/2)px
}
Otherwise you will need to get the computed values of width and height in JavaScript.
If you can have a fixed width and height for the <div>, then I’d suggest this:
HTML
<div class="hover_image">
<img width="250" height="300" src="http://pauldwaite.me.uk/images/professional.jpg" />
<div class="overlay">Hello!</div>
</div>
CSS
.hover_image {
position: relative;
float: left;
}
.hover_image .overlay {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 3em;
margin: -2em 0 0 -55px;
padding: .5em 5px;
background: #006;
color: #fff;
}
.hover_image:hover .overlay {
visibility: visible;
}
http://jsfiddle.net/ZKXgw/
You may need to add some JavaScript to make .hover_image:hover work in earlier versions of IE, which didn’t support :hover on anything except links.
If you can’t have a fixed width/height, it’ll be a lot tricker to achieve.
Things aren't really clear to me, any way you can play with the CSS/style of the element to work around on this.
To center an element you can set the top and left by 50% where its position is set to absolute. Then set the margin-top the half size of its height in negative, and the margin-left the half size of its width in negative.
To place the div in top of the image, its z-index must be higher than the image. But first the image must have the higher z-index until its not rolled-over.
To show the div on top of the image change the z-index of the image lower then the div. Using hover or onMouseOver event. There other ways of doing this, base on your needs.
See jsfiddle in action
You can use z-index property with absolute positioning to place the div on top of the image. Since you want this to be hidden, set the "display" property in css to "none".
The second part of your question can be accomplished by using a javascript function that you can call onmouseover [ http://www.w3schools.com/jsref/event_onmouseover.asp ]. All the function would have to do is change the "display" property of the element from "none" to "block".
I have a scenario where I need a transparent background image but I have no control over the dynamically generated images I use. For that reason Transparent PNG is out of the question. All child elements within the same div should NOT be effected and should be fully visible.
I know how to apply transparency to background colours and block level elements but can you do this for a background image?
Setting the opacity of the element with the background is a good start, but you'll see that any elements within the one whose opacity is changed will also be transparent.
The way around that is to have an element that contains the background and is transparent (opacity:0.6; filter:alpha(opacity=60)), and then float or position the container with the actual content over it.
Here's a sample of how this approach would work:
#container {
width: 200px;
postiion: relative;
}
#semitrans {
width: 100%; height: 100px;
background: #f00;
opacity: 0.6;
filter:alpha(opacity=60);
}
#hello {
width: 100%; height: 100px;
position: absolute;
top: 20px; left: 20px;
}
<div id="container">
<div id="semitrans"></div>
<p id="hello">Hello World</p>
</div>
No. Not technically. You'd have to apply a background-color in order to get this to work because you'd be fading the color and image, rather than just the image. Remember that a background image is not styleable content.
You could probably hack it by using an image instead of a background image and there a mixture of relative and absolute positioning with some z-indexing on top. But that's the only way I can think of!
IE uses filter:alpha(opacity=50); while others use opacity:.5
Just include them both.
Can background image extend beyond div's borders? Does overflow: visible apply to this?
No, a background can't go beyond the edge of an element.
The overflow style controls how the element reacts when the content is larger than the specified size of the element.
However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.
Following up on kijin's advice, I'd like to share my solution for image offsets:
/**
* Only effective cross-browser method to offset image out of bounds of container AFAIK,
* is to set as background image on div and apply matching margin/padding offsets:
*/
#logo {
margin:-50px auto 0 auto;
padding:50px 0 0 0;
width:200px;
height:200px;
background:url(../images/logo.png) no-repeat;
}
I used this example on a simple div element <div id="logo"></div> to position my logo with a -50px vertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)
not possible to set a background image 'outside' it's element,
BUT YOU CAN DO what you want with using 'PSEUDO' element and make that whatever size you want and position it wherever you want.
see here :
i have set the arrow outside the span
here is the code
HTML :
<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>
strong text
.tooltip{position:relative; float:left;}
.tooltip .msg {font-size:12px;
background-color:#fff9ea;
border:2px #e1ca82 solid;
border-radius:5px;
background-position:left;
position:absolute;
padding:4px 5px 4px 10px;
top:0%; left:104%;
z-index:9000; position:absolute; max-width:250px;clear:both;
min-width:150px;}
.tooltip .msg:before {
background:url(tool_tip.png);
background-repeat:no-repeat;
content: " ";
display: block;
height: 20px;
position: absolute;
left:-10px; top:1px;
width: 20px;
z-index: -1;
}
see here example: http://jsfiddle.net/568Zy/11/
No, the background won't extend beyond the borders. But you can stretch the border as far as you want using padding and some clever tweaking of negative margins & position.
I understand this is really really late, and I am not even sure if this is best practice but I found a little way to do this with my footer. My last section had a background image that I wanted to overflow into the footer and I fixed it with a few lines of CSS. Also added a little padding the section with the background image.
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
I tried using negative values for background-position but it didn't work (in firefox at least). There's not really any reason for it to. Just set the background image on one of the elements higher up in the hierarchy.
After a little bit of research: No and No :)