I've got this image and i want to put it over my website as a foregound. It should overlap the background and the elements. I'm using CSS.
https://www.dropbox.com/s/aawxonln4h1i5dt/Snow.png?dl=0
If I understand correctly you want something like this:
Html (place somewhere on top):
<img src="URL_TO_IMAGE" id="overlay"/>
CSS:
#overlay{
width:100%;
position:absolute; /*You may also use fixed depending on your needs.*/
left:0;
top:0; /*If you want it at the bottom you probably want bottom:0 instead*/
z-index: 999;
}
Related
I'm working on a mobile version of my website, and I'm having trouble vertically-centering two divs. Since it is a mobile site, my css needs to work on any type of screen resolution, so this is where I'm having the problem. Also, different images will be used depending on what page you are on, so the resolution of the image is not static either. I need a way to center both my image div and text div no matter their height or width.
I've made a fiddle here to start out with. As you can see, I chose the green area to be the "screen" for the phone, and I want both the picture to center vertically, and the text to be on top of the picture and center vertically as well. Any help?
What I have so far... (in my jsfiddle)
HTML:
<div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>
CSS:
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.overlay {
position:absolute;
top:0;
left:0;
}
#picture {
}
#picture img{
width:100%;
}
#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
For vertically centering you can set margin top/bottom to auto.
If I understand where you want the text, this should work.
Html
<div id = "screen">
<div class = "overlay" id = "text">This is where the text would appear</div>
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>
and css
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
#picture {
margin: 0 auto;
}
#picture img{
width:100%;
}
#text {
position: absolute;
top:50%;
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
So it doesn't seem like there is a pure css way to do it, so I ended up using jQuery instead. I made a fiddle in case you want to see how I did it, but the jist of it was this.
On document load, find any item with class "overlay" and apply a negative margin-top of half it's height to center it. Because it already has a position of absolute and top:50%, this will vertically center the item.
$(document).ready(function(){
$(".overlay").each(function(){
$(this).css("margin-top", $(this)[0].scrollHeight/2*-1);
});
});
It's pretty simple, and I wish there was a way to do it in pure css, but this way works as well. Thanks for all the help.
After the discussion in the comments I've determined this question is not nearly thought out well enough to attempt to answer and so this will stay simply in hopes that someone else that finds this page is helped by the answer
:::Initial answer:::
This question is easily much more difficult than you've made it seem. If it's a matter of fitting the image to the viewport of the device there is no single css solution and a javascript solution will be needed.
Let me explain, if the image is much taller than it is wide then to fit the image to the screen you'd want to set the height to something like 90% of the height (give some padding for the text etc). however since the image is variable size if the width is the greater value you'll want the width to something like 90%. Herein lay the problem, you wont want both the height and the width of the image to be 90% as that would distort the image. So there will need to be some javascript to flop around some classes here.
After that the css gets a bit hairy also, if you're looking for an overlay to display the same based on any position the user clicks on an image (assuming this is a sort of gallery) rather than an absolute positioned item at the top and left of the document you'll want a position: fixed; element which is positioned on the viewport.
All described before would need a bit of javascript again because there is no easy way to center something that is fixed without using negative margins of half its width/height.
An example of such a thing is here:
http://jsfiddle.net/5hHMa/2/
Here we have the css for the very fixed case which you have presented.
.overlay {
position:fixed;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
#picture img{
width: 300px;
}
#text {
background-color:#000;
opacity:0.5;
color:#fff;
}
Ideally what you would do is instead of using a fixed value for the margins and width as I have you would determine these values and set them using javascript.
It is hard to form a complete solution for your problem with the limited information given, however hopefully this gives you a push in the correct direction.
Okay, I'm trying to get an image with position fixed to hide behind specific DIVs. To my understanding, this should be possible using z-index. However, I've tried everything and cannot get this to work properly.
URL: http://www.aadesigns.net/who-we-are/testimonials/
The image I'm having a problem with is the happy woman celebrating. Everything works GREAT until it gets to the bottom of the page and you'll see her overlap DIVs.
I've been in firebug for about 1.5 hours trying to figure out how to do this by manipulating z-index...
Any help would be greatly appreciated here.
EDIT* More specifically, I need the image to vanish behind the footer and the footer_bottom DIVs
Add z-index:100 to img inline style. Better convert this inline style to class like below
.testimonials img{
position:fixed;
left:50%;
margin-left:-600px;
bottom:0;
z-index:100
}
apply z-index: 100; on img
<img src="http://www.aadesigns.net/wp-content/uploads/2012/09/happycustomer1.png" alt="" title="happycustomer" style="position:fixed;left:50%;margin-left:-600px;bottom:0;z-index: 100;">
Define your #footer z-index:-1;
Add this css
#footer{
z-index:-1;
}
-------
or second option
.testimonials img{
z-index:1;
}
i need to create a div in position fixed where i will put the image under a div with the rest of the content
i have put in my CSS header {
margin-bottom: 310px;
} to create a blank below space where there is gonna be my img in the div id="background" in position fixed below.
So then i have created the following id:
#background {
position:fixed;
width:100%;
height:100%;
top:130px;
left:0;
z-index: 1;
overflow:scroll;
}
and
#content {
width:100%;
height:100%;
top:60px;
left:0;
z-index:2;
overflow:scroll;
}
The id background is supposed to be the div where my image is gonna be placed right in the blank space l after the header, the id content is the div where i am gonna have my page content and it start from the top.
Here the page : http://fiddle.jshell.net/CGJmE/4/
The effect i want to achieve is exactly this : http://tommywebdesigner.com/Home%20Page.html
but using the div to gain more flexibility. My problem is that i cannot insert properly my div id background in the position fixed with the image.
I think it s something very simple at this stage, How would you do that?
Hope the explanation is clear
You need to do that with background-position: fixed
I've shown you in this jsfiddle: http://fiddle.jshell.net/CGJmE/7/
Good luck!
I do not understand why you put overflow: scroll on #background, it does nothing, really.
Same with the overflow:scroll on the #content. It is redundant.
In general I do not quite understand what your problem is: http://fiddle.jshell.net/CGJmE/6/
I added <div id="background"><img/></div> where you indicated.
This of course still lacks styling for the header and content. (I added background-color to .container so it doesn't look too ugly).
I assume you have that somewhere else?
If you need more help, please elaborate in more detail what your problem is.
I am using JS to write HTML code where I need to display 2 images exactly overlapped.
The height and width of both are same.
What CSS properties can I use to do this?
Position relative on the container, and absolute on the images:
All of the above answers are missing the fact that you need to position a parent element with something other than static, or else you will be positioning them absolute to the browser window, which I presume you do not wish to do.
position: absolute will give your position in the container of the closest parent with some sort of positioning. So we give the parent position:relative; without declaring top or bottom, this way it will be 0px off from where it would normally be (i.e. no change, but still has position declared).
<div id="container">
<img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
<img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
</div>
#container{
position:relative;
}
#container img{
position:absolute;
top:0;
left:0;
}
.hide:hover{
opacity:0;
}
http://jsfiddle.net/BLbhJ/1/
Edit: Added your hide functionality
Play around with the css in this:
http://jsfiddle.net/zuZxD/
I used opacity to display the overlapping.
<style>
.imageoverlap{
position: absolute;
top:100px;
}
</style>
...
<div class='imageoverlap'>
image1
</div>
<div class='imageoverlap'>
image2
</div>
Try that :D
If you set position to absolute, you can control where you want to place it.
<style>
#overlay{position:absolute; top:0px;}
</style>
<div id="layer1"><img src="img1.png"></div>
<div id="overlay"><img src="overlay_image.png"></div>
Now you need to position #overlay where you want it, by setting top and left positions, i.e., top:0px, left:300px;
I need to position elements and receive like in attached image
I have a page where all elements are inside MainDiv. There are 2 images.
I would wondering if somebody showed my html + css should be.
thanks in advance!
A possible way would be to set the position of the overlayed image to absolute:
#overlayImage{
position:absolute;
right:0px;
bottom:0px;
width:150px;
height:150px;
}
Important is, that the position of the main div is not "static".
<div id="main_div">
<div id="other div"> </di>
<div id="overlayImage"> </div>
</div
you can accomplish this the following way: assign the background image as background to the main div
background: url(some/url/to/image) no-repeat scroll top right transparent;
then add a normal image element inside that div and position it absolute with the folllowing css
right: 0;
bottom:0;
position: absolute;
make sure the main div has position set to relative