Alignment Issues with fixed-background images - html

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.

Related

Fixed header image that is overlayed by a semi-transparent image when scrolling down

I'm trying create an effect on a header image that will progressively blur and fade that image on scrolling down. I've tried to search online for a solution but I don't even know what to call it. I have found an example very close to what i'd like to achieve but I don't quite understand how they've done it either. My experiments have been a total flop and I was wondering if anyone could either point me in the right direction or at least let me know what something like this might be called so that I can search for a solution. Thanks for your time.
The example site is https://www.intertel.co.za/password-grabber
(You'll notice how the background image is almost black by the time the page content reaches the top of the screen - that's what I want)
I've included a snippet here so you can see my dismal attempt
.header-container {
position:relative;
top:0;
left:0;
width:100vw;
height:25vh;
overflow:hidden;
}
.header-image {
background-image:url(header-image.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
background-attachment:fixed;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.header-overlay {
background-image:url(header-overlay.png);
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
position:fixed;
top:100%;
left:0;
width:100%;
height:100%;
margin-bottom:-25vw;
z-index:2;
overflow:hidden;
}
<div class="header-container">
<div class="header-image"></div>
<div class="header-overlay"></div>
</div>
I don't know if there is a solution in pure CSS but you should try using Javascript to create a function that modifies your div style when scrolling down.
What you are looking for are CSS Filters. With these, you can blur images, add/remove contrast and a lot more.
The link you have provided makes use of a blurred image that has been created beforehand. When you're at the top of the page it has an opacity of 0, which goes up to a max of 1 when you're scrolling down.
Their approach is less resource heavy, but not the ideal way, if you ask me. If you use CSS Filters, you will be able to give the same effect to every image you want without having to create a blurred out copy every time you want to use a new banner image.
The way you achieve the effect is fairly easy with JavaScript. I've created a Fiddle to demonstrate the effect. Of course you can do a lot more with this piece of code, like shifting the hue, removing contrast, etc.
Hope this helps

How to vertically centre random images of unknown sizes

I have searched for a solution for this CSS issue but the solutions I have found do not seem to work in my situation.
I am pulling in random images from Flickr. Some of them are portrait, some are landscape.
When the pictures selected include both portrait and landscape images I want to ensure they are all centred vertically.
I have read that
vertical-align:middle;
display:table-cell;
on the container should make this work, but in my case it doesn't - perhaps some of the other CSS in place is stopping this working.
I have created a JSFiddle to show my problem: http://jsfiddle.net/alexbfree/C35DR/2/
Can you help?
Alex
The code with table-cell can do the trick but you need to remove the float property:
div.flickr_badge_image {
width:23.8%;
margin: 0 1.5% 1.5% 0;
/*float:left; Remove this*/
}
Check this Demo Fiddle
Now if you want to keep the float you can also do this to center the a tags inside:
div.flickr_badge_image:before {
content:" ";
display:inline-block;
height:100%;
background:red;
vertical-align:middle;
}
div.flickr_badge_image a {
display:inline-block;
vertical-align:middle;
}
Check Demo Fiddle2
Sorry I cant comment yet.
Do you want something like this?
<center>
<div id="box-2148-0-0-0" class="module ui rounded embossed shadow yellow module-box">
http://jsfiddle.net/C35DR/4/

Position:fixed image overlapping divs

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

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.

Can't click links in lower z-index element in Chrome/Firefox/Safari

This code works fine in internet explorer, but I am having problems in other browsers.
Basically there is a horizontally scrolling page with a fixed left sidebar.
In IE you can click on the forward and back buttons on each panel of the page, but in chrome, etc, only the links in the sidebar work.
I believe it to be a problem with the z-index or positioning of the elements, the css has
#bg{
display:inline;
position:absolute;
left:0px;
top:-2px;
z-index:1;
}
#sidestripe {
display:inline;
position:fixed;
left:0px;
top:-2px;
width:100%;
min-height: 100%;
z-index:1000;
}
I have tried many combinations of z-index, but i can't seem to make one elemnt clickable without making the other unclickable.
Any help would be greatly appreciated!
http://www.travelhome.com.au/index.htm is the website in question
Change your #sidestripe width to 380px instead of 100%:
#sidestripe {
display:inline;
position:fixed;
left:0px;
top:-2px;
width:380px;
min-height: 100%;
z-index:1000;
}
This way it will not cover other content on the page
I don't know what can be exactly the problem but I had a similar problem some time ago.
To fix it I navigated through the developer tool of Google Chrome and a predefined Z-index was applied by a hidden class, so mine was being overwritten.
Try to find all the classes applied and possibly you will find something similar.
This usually happens when working with APIs.