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:


#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: 9a51d01ed1dc832f74a0dd64c3e4431b

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

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.

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.

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;

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 :)

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...


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...

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.

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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.