Help: adding a static Image on footer using css

[newbi11]

Hi everyone
Please I would really appreciate if someone could help with a code on how to add an image to a footer using css:

Here's is my footer code:

CSS:

#footer { width:920px; margin:0 auto; background:url(../../images/footer.png) }
.footer-cities { padding:15px 10px 10px 20px; border-bottom:1px dotted #fff }
.footer-cities-holder { padding:0 0 0 10px}
.footer-cities dd { float:left; width:146px; }
.footer-cities span { display:block; font-size:10px; color:#fff; margin:0 0 1px 0}
.footer-cities span a { color:#fff; background:url(../../images/li_cities.png) no-repeat 0 2px; padding:0 0 0px 11px; }
.footer-cities h4 { color:#fff; margin:0 0 4px 0; font-size:11px }
.footer-links { font-size:11px; color:#fff; padding:14px 0 14px 10px; float:left; width:70% }
.footer-link-op { display:inline; padding:0 10px; border-right:1px solid #fff; }
.footer-link-op-last { border:none; }
.footer-link-op a { color:#fff; }
.footer-copyright { padding:14px 10px 14px 0px; color:#fff; font-size:11px; float:right; width:25%} 
.footer-holder { margin:0 10px 0 0}
.footer-links-copyright {  }

I would like the footer to look like the attached image illustration:

[gabrielcastillo]

Can we see your HTML? You would add an img tag just after your footer open tag or you could add a div with the background set to URL with the image URL as the property value

[NetJunkie]

All you need to do is create a <img> tag or a <div> tag and declare the path for the image. Then use float as your CSS rule to position it in your footer.

[living]

That's right, you have many thing in your footer, so that's grate but as said you just need to include either <img> into html file or a <div> that to in html but the placement of pic in css.

[webhawk]

For footers or headers that have a lot of things like extra divs in them, I've added images as a background in the css code to place a static image:

.footer {
    position: relative;
    background: url(../images/Main/header.png) no-repeat center center; 
    top: 0px;
    left: 0px;
    padding: 0;
    margin: 0;
    width: 975px;
    height: 355px;
    text-align: center;
}

[mridul.ahuja]

One way of getting around your problem is to make a single background image for your footer consisting of all the 3 images u want to use.

Then you can use this code to display your image in the footer background

div {
    width: 100%;
    height: 400px;
    background-image: url(your_background_image.jpg);
    background-size: 100% 100%;
    }

Hope it helps :)

[Albert Pinto]

Why not make use of ABSOLUTE positioning... i mean create 3 divs... of width and height equvivalent to the images width and height... and position them accordingly... no need of "img" tag... use background property for the divs....

For positionng use appropriate attributes...

I guess for Img 1.... left:0;

Image 2 and Image 3 set right:0;
no need of floats...
use margin-right for Image2 and Image 3.. if you don't want the images to stick to extreme right...

VERY IMPORTANT: make sure all these 3 absolute positioned divs which will be residing in parent div... set that parent div as ...position: relative...

Hope that works... I mean some members might come up with much better solution... but this might also work... give it a try...

Regards

[Albert Pinto]

There is something known as SPRITE in css.... I've never used it... just google for CSS sprite... Create a transparent image in photoshop and put all the 3 images in it... I mean as a single image... and use portions of it... Just google for CSS Sprites.... That might do the trick...

[gentlemedia]

It's obvious newbi11 is after all not interested in an answer or help, so better stop wasting your time and efforts on this thread.

[Albert Pinto]

Well... its not about OP... someone may have similar issues and might stumble upon this site.... and seek a solution...

[alisajjad160]

Just add the Div and class, where u want a static image, and in css work, add image by using background:url('#'); The simplest and easiest way.