Css Positioning & Floats

[Justinius]

Hi,

I have a horizontal image i am trying to position to sit at the top of my footer, but am having trouble getting it to position correctly. See the test site link here:

The image is supposed to emulate a grass image, so the baseline of the image needs to sit on top of footer appearing as grass grwoing out of footer?? I have tried palcing in body, and also in footer but cannot get it to do what i require. Any help & pointers much appreciated.

Many Thanks

Justin

[Paulie_D]

Since the image is styling is should be in the CSS as a background image and not an image in the HTML

There are a couple of ways to do this but, perhaps the easiest option is place it as a background image of the element just before your footer.

In this case, it’s the div with an ID of #main-content.

Give that area enough padding-bottom for the size of the image (although we can play with this if necessary)…your is 60px I believe.

Then do something like this.

#main-content {
  height:200px; /* just for show */
  padding-bottom:60px;
  background-image: url(http://79.170.40.234/homewoodcheesestest.co.uk/wp-content/uploads/2014/05/grass-footer.png);
  background-repeat: repeat-x;
  background-position: bottom center;
}

http://codepen.io/Paulie-D/pen/Chtfw

[Justinius]

Thanks for this, I understand the concept, i have tried this, and if you view the site now you can see it is behaving odd, and the whole footer content has moved up. AS this is a wordpress site, main-content id already exists within the php files, is this the reason??

Regards

Justin

[Paulie_D]

You seem to have used the height property is specified was just for show in my _example_.

You should remove it.

#main-content {
height: 200px; /* remove this */
padding-bottom: 60px;
background-image: url(http://79.170.40.234/homewoodcheesestest.co.uk/wp-content/uploads/2014/05/grass-footer.png);
background-repeat: repeat-x;
background-position: bottom center;
}

[Author]

Posts