CODEWITHSUNDEEP
htmlcss
mattmouth
mattmouth

Reputation: 129

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.

Upvotes: 0

Views: 147

Answers (2)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

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/

Upvotes: 1

mattmouth
mattmouth

Reputation: 129

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.

Upvotes: 0

Related Questions