Position:fixed image overlapping divs - html

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;
}

Related

How to make a foreground image using CSS?

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;
}

Fixed div background

I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.

div in position fixed with image under div with main content

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.

Re-position text with Image Re-size in CSS/HTML

I've been working on this for hours, and reading over 20 articles and I still have no idea how to do this. I have a background, in which I want text to be positioned in a certain place. Everything is fine until I view it on a monitor with a larger resolution. The background re-sizes fine, but the text is no longer in the place I want it to be.
These images hopefully will clearly describe my situation.
How I want the text to look at any resolution (this is on a 1440 x 900 monitor) http://dl.dropbox.com/u/9134840/demo/1.PNG
This is how it looks on a 1080p Monitor:
http://dl.dropbox.com/u/9134840/demo/2.PNG
<body>
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</body>
</html>
body {background-image:url(back.jpg); background-size:cover;}
#blah{font-size:large; left:300px; top:200px; position:absolute;}
edit: I tried both suggestions, using divs and positioning the text absolutely and relatively and still a no go, the text still moves.
#contain{
position:relative;
width:7000px;
margin:0 auto;}
#blah{font-size:large; left:100px; top:200px; position:absolute;}
I'm not looking for a fixed positioning, because I'm going to be adding content so I need to scroll vertically through the page without the text moving.
Your #blah div needs to be positioned inside a relative div. You might have problems with that if you absolutely positioning something in relation to the body. Place it inside another div or use fixed positioning.
#containerDiv {position:relative;}
#blah {position: absolute; top:200px; left:300px;}
<div id="containerDiv "><div id="blah"></div></div>
Or
#blah {position: fixed; top:200px; left:300px;}
In this case your div will always remain the same place if you resize the window. If you want it to be centered, use something like:
#containerDiv {position:relative; width:700px; margin:0 auto;}
#blah {position: absolute; top:200px; left:300px;}
Also bare in mind that background-size:cover; will not work in versions of IE.
Examples:
http://jsfiddle.net/mYcXX/1/ (absolute) vs http://jsfiddle.net/mYcXX/2/ (fixed)
This looks like fixed layout.
If so why just not cut the central part of the background and put it in a div with style:
{
width:960px; // maybe more or less - the width of the central image
margin-left:auto;
margin-right:auto
}
And position the paragraph relating to that container (the div)
I believe you can solve this problem by separating the background image style from your container. I could be wrong, but try something like this...
body{
background: url(black.png) top center no-repeat;
}
#container{
width: 960px;
margin: 0 auto;
}
I would recommend relying on the natural flow of the dom as much as possible. Basically, don't ever rely on position: absolute unless ABSOLUTELY necessary. And even then its probably a hack.
Okay, I figured it out myself, big thanks to yisela for the guidance. Ultimately though, here's what I did. I looked at a site, like yahoo.com and saw that they had everything centered and had a white background. So no matter what resolution you had, it will still look neat. With that in mind, I made sure my image was gray, and change the background to gray so it all blended in.
Now, as for the container stuff. I placed the image in a container by itself, and centered it. Then I just set the paragraph relative to the container. That way the text will stay in the same position.
html{ background-color:gray }
body{ }
#contain{
width:1280px;
height:2000px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background: url(back6.png);
}
#blah{font-size:large; left:120px; top:230px; position:relative;}
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</div>
</body>
</html>
And now..I think I'll happily go back to c#, after this wonderful experience with CSS.

Alignment Issues with fixed-background images

Not exactly sure how to phrase the question in the first place here but I'll give it a go.
I have an image that I want to fixed-scroll down the page, which I want to change colour smoothly as it enters a second div with a different coloured background. I've got the divs sorted, the images placed perfectly and the effect I want working excellently - my only problem now is that I cannot align the two images for the life of me, due to using percentages etc.
I have a working example here you'll certainly need to look at - jsFiddle - you may need to resize the page around a little bit to understand the particular alignment issue I'm having. The top "Hello" sits a set amount off-center, which I want to achieve with the second "Hello". I just can't get it to happen! Any suggestions? I've been looking at possible jQuery solutions but no luck so far.
Thanks heaps for any answers. Cheers.
Live demo link here http://jsfiddle.net/EtJBn/107/
Hi now you can do easily this
Just define some properties as like this
Css
html, body {
height:100%;
}
#top{
height:100%;
width:100%;
}
#bottom{
height:100%;
width:100%;
background-color:black;
z-index:200;
}
#topsq {
position:fixed;
height:175px;
background:url("http://mattwaymouth.com/images/hello_small.png") no-repeat center top;
left:0;
top:50px;
right:0;
z-index:1;
}
#second {
position:relative;
background: url("http://mattwaymouth.com/images/hello_small_green.png") no-repeat center 50px fixed;
left:0;
top:0;
right:0;
z-index: 200;
height:300px;
}
HTML
<div id="top">
<div id="topsq"></div>
</div>
<div id="bottom">
<div id="second"></div>
</div>
Live demo http://jsfiddle.net/EtJBn/107/
Well. Seems I found a solution, though I wouldn't call it ideal. It works well though! After Chad said to try background-position: left center; I realized if I simply put the image as background-position: center; and made the image have a bunch of blank space to one side, with enough twiddling on photoshop I'd manage to line the two up. Works great now, lines up perfectly in all my browsers.
Here's the example - jsFiddle (though you cant see much of a change in it, as it's the image itself that had to be altered.)
Thanks for the replies guys.