Background image a set distance from bottom

HTML & CSS
21

For the lady/dogs image, I would add position:relative to #head, and then place that image within the head div. I would also use the full image, without the lady’s head being cut off. Give the image position:absolute, and place the image in the top right of the #head div, giving it a negative top and right margin. E.g.

HTML

<div id="head">
    <img class="lady" src="uploads/images/lady.png">

</div>

CSS

#head {
    position: relative;
}

img.lady {
    position: absolute;
    top: -20px;
    right: -20px;
}

PS Those negative left and right settings of -20px are just guesses. You can play with them till you’ve got the right position.

22

I’ve tried that Raplh, it seems to work fine for the dog on the right, but the girl’s head is just disappearing behind the green section?

23

Hi,

The girls is being cut off because of the overflow:hidden I added to clear the floats. When you need visible overflow you will need to use another clearing method so try this.


#container {
    width: 750px;
    margin: 0 0 0 90px;
    background:url(http://www.f5web.co.uk/wpw/uploads/images/bottomback.png) bottom center no-repeat;
    padding:0 72px 107px 40px;
[B]    /* overflow:hidden;remove*/[/B]
    min-height:570px;
}
* html #container {height:570px;}
[B]#container:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
#container {display:inline-block;}
/* mac hide \\*/
* html #container {height: 1&#37;;}
#container {display: block;}
/* End hide */[/B]
24

Thanks Paul, that works now - although I don’t really understand why?

I’ve never seen :after used before, nor the content:“.” - can you explain what they are doing, or point me in the direction of somewhere I could read up on it?

Many thanks for the continued help :slight_smile:

25

That code Paul posted—

#container:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
#container {display:inline-block;}
/* mac hide \\*/
* html #container {height: 1%;}
#container {display: block;}
/* End hide */

is a variation of what is commonly know as the “clearfix” method of getting containers to wrap around floated contents.

26

Ahh, so basically it’s putting a . below the #container div to drag it round the content, then hiding the . so it doesn’t affect the design?

27

Yes. Very sneaky, eh?!

overflow: hidden is much simpler and is widely used, but you discovered why it isn’t always appropriate—such as when you want content to hang outside the container. (BTW, sorry for not seeing that coming earlier… I should have checked for that.)

28

Indeed - and very handy to know! :slight_smile:

No need to apologise, I would have been stuck without the advice so thanks to you, Paul and Ray for all the help!

As a side, although I don’t need to do that anymore, is there a way to place a background image a set distance from the bottom or the right, as opposed to the top or left?

29

Pretty much yes. The background declaration looks like this:

background: transparent url() scroll repeat [COLOR="Red"]0 0[/COLOR];

This is the default setting. You can replace “transparent” with a color, such as #ff0000. Inside the brackets you place a path to an image. Instead of scroll you can used fixed. Instead of repeat you can use no-repeat or repeat-y or repeat-x.

0 0 means 0% from the left and 0% from the top. So if you change that to 100% 100%, for example, the image will sit at the bottom right, or if you use 50% 50% the image will be centered (the middle of the top of the image aligns with the middle of the container’s top, and the middle of the side of the image aligns with the middle of the side of the container). You can also use words like top center, or other values like 10px 40%.

So you could place the image near the bottom right corner, but you would not be setting a distance “from” the bottom right corner. If using pixels, you would be setting the distance of the image’s top left corner from the top left corner of the container. If using % (say 90%) you would be placing the point 90% down or along the image 90% down or along the container.

Hope that makes some kind of sense.

30

Thanks for the reply Ralph and yes that does make sense - but am I right in saying that it wouldn’t work in a fluid layout, i.e. one where it would always be a fixed distance from the bottom (say 100px).

31

You can’t place a background image at 100px from the bottom but you could place it at 90% form the top as Ralph suggested. It will work just the same in a fluid layout as a fixed one and will keep at the position you set.

You could add 100px of transparent image to the bottom of the background image itself and then place it at 100% and that would give you the effect of being at 100px from the bottom of that element at all times. :slight_smile:

32

Oooo, sneaky! That’s a nice suggestion. There’s always a way to beat the system!

33

Am I not right in saying though that by using a percentage as a distance, it couldn’t be pixel accurate? I.e. rounding of numbers might cause the position to be a pixel out?

I do like the idea of the transparent gap though - don’t know why I never thought of it myself!

Thanks Paul.

34

It depends on what element you have it placed in.:slight_smile: If the element is a fluid height (as it should be) then 90% of say 1000px height is completely different from 90% of 2000px height. and may be many tens of pixels difference.

You could only be accurate if your element had a fixed height and worked out what percentage would leave you with a 100px gap :wink:

35

Paul, wouldn’t it have been simpler to replace {overflow: hidden;} with {display: table;}? I didn’t test this page, but since there’s a declared width, there’s no worry about shrink-wrapping, and IE6/7 is covered by the width being a hasLayout trigger.

edit: Never mind. I forgot the purpose was to allow for an overflow condition which {display: table;} would not allow. My bad. :head hung in shame: ⇐ where’s a ‘head hung in shame’ icon?

cheers,

gary

36

lol - If I remember correctly the element that was overflowing was being placed there absolutely so Firefox would have baulked at the position:relative and display:table anyway.

If the element was overflowing by negative margins then display:table would have been ok so it was a fair suggestion :slight_smile:

display table doesn’t hide overflow by default but it will stretch to accommodate an element that is too big and therefore there wouldn’t be any overflow.

I had to run tests to check all those - just to be sure :wink: