Jump to content

Positioning an image at the bottom of the page (not screen)


creativeg33k

Recommended Posts

Hello everyone! I'm new here and I have a question that's driving me nuts for a specific project I'm currently working on.

 

I need to position an image at the bottom of the page, not the screen...and I need that image to be on top of the rest of the content and I also need it to be offset from the center about 450px.

 

Currently, I have it just as the background image to a container div...which ensures that it lines up at the bottom of the page... but the z-index doesn't work.

 

Here's the page in progress...

 

http://74.53.186.70/~powerpro/staging/newnene/index.html

 

In order for that to be offset from the center, I saved the image with extra space to spare...which obviously does not work in putting the image in as something other than a background as it adds a horizontal scroll.

 

Here's the image that needs to be in the position viewed in the link above so that it overlays the rest of the content:

 

http://74.53.186.70/~powerpro/staging/newnene/flowers.png

 

I'm betting there is an easy fix but I'm too close to it to see right now and too frustrated after multiple attempts failed.

 

Thank you!

Link to comment
Share on other sites

flowers.png in your second link is 698*698 but the background image in your html page is flowers2.png 1679*692px.

 

When I look at the page in 1024*768 resolution most of the image is outside the left edge because the image is too big. If you added left into the style, it should always show the whole image:-

#container {
margin-left:auto;
margin-right:auto;
background-attachment: scroll;
min-height:100%;
z-index:1000;
       margin-left:auto;
margin-right:auto;
bottom:0;
background-attachment: scroll;
background-image: url(flowers2.png);
background-repeat: no-repeat;
background-position: bottom left;
}

 

but I'm not sure if I have answered your question. The z-index: 1000; probably isn't necessary. Since the #container is the first div after the <body> tag, the z-index just puts it on top of the body, which is normal.

 

If you want the image on top of later divs with content then you may need to create a div with a width, height and positions but with position: absolute; z-index: 1000; and put position: relative; without a z-index in the #container style. That will cause the position: absolute div to take its top or bottom and left positions from the corners of the #container position: relative div instead of from the body window corners.

Link to comment
Share on other sites

flowers.png in your second link is 698*698 but the background image in your html page is flowers2.png 1679*692px.

 

When I look at the page in 1024*768 resolution most of the image is outside the left edge because the image is too big. If you added left into the style, it should always show the whole image:-

#container {
margin-left:auto;
margin-right:auto;
background-attachment: scroll;
min-height:100%;
z-index:1000;
       margin-left:auto;
margin-right:auto;
bottom:0;
background-attachment: scroll;
background-image: url(flowers2.png);
background-repeat: no-repeat;
background-position: bottom left;
}

 

but I'm not sure if I have answered your question. The z-index: 1000; probably isn't necessary. Since the #container is the first div after the <body> tag, the z-index just puts it on top of the body, which is normal.

 

If you want the image on top of later divs with content then you may need to create a div with a width, height and positions but with position: absolute; z-index: 1000; and put position: relative; without a z-index in the #container style. That will cause the position: absolute div to take its top or bottom and left positions from the corners of the #container position: relative div instead of from the body window corners.

 

Yeah the client wants it to be something that is viewable more for people with larger screen resolutions so it's understood that elements will fall off the way.

 

As for the design, I've updated it and I've figured a part of it out... but I haven't gotten how to make sure the flowers.png is a specific number of pixels from the center.

 

Is there a way to do that?

Link to comment
Share on other sites

You can't position a background image a certain number of px from the center, you can either position it exactly at the center or a certain number of px from the left of its container. If the container has a fluid width, you may not be able to position the background image from the left edge to suit all window widths as you want.

 

The other solution is to put the background image in a separate div with position: absolute; left: 50%; margin-left: -??px; so that the left: 50% sets the image's left side at the center of any resolution and the negative margin-left pulls it back left away from the center line by the number of px. You then make the container for this extra div have position: relative as I described in my first post so that the position: absolute div is related to the position of the container div..

Link to comment
Share on other sites

You can't position a background image a certain number of px from the center, you can either position it exactly at the center or a certain number of px from the left of its container. If the container has a fluid width, you may not be able to position the background image from the left edge to suit all window widths as you want.

 

The other solution is to put the background image in a separate div with position: absolute; left: 50%; margin-left: -??px; so that the left: 50% sets the image's left side at the center of any resolution and the negative margin-left pulls it back left away from the center line by the number of px. You then make the container for this extra div have position: relative as I described in my first post so that the position: absolute div is related to the position of the container div..

 

I've set the image flowers.png in a separate div within the container...

 

 

#container {

position:relative;

margin-left:auto;

margin-right:auto;

}

 

#flowers {

position:absolute;

bottom:0;

z-index:1000;

width:698px;

height:686px;

}

 

 

...

 

<div id="container">

<div id="flowers"><img src="flowers.png" /></div>

 

...

 

 

 

So now it's above the rest of the site but the positioning is still off. I'm going to test what you've just posted to see how that goes.

Link to comment
Share on other sites

Update!

 

It worked great. This is exactly the effect I was going for:

 

#flowers {

position:absolute;

bottom:0;

z-index:1000;

width:698px;

height:686px;

left: 50%;

margin-left: -785px;

}

 

 

What's perfect is that the image overlays the content but doesn't line up with the left of the screen...and in fact falls off the screen to the left if the resolution is lower.

 

Thank you so much!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...