[CSS] Footer Image?

[Patriik]

I wanna create footer where there is one picture that I have and when you scroll up it is just color so the image is only down on the footer of the page.. I also would like to have some text over that footer picture and few pictures. So how I do that? Give me some code examples, I am stuck!

 

[JayC]

You need to reword this I do not understand what you are trying to do.

 

[RastaLulz]

Create a mockup in MS Paint, and/or provide us with a jsbin of what you've already tried.

 

[Patriik]

You need to reword this I do not understand what you are trying to do.

Well as you can see in this picture there is those black buildings down there only and rest of the page is that silvery color background. I want to do the same so I have the "main" background example blue colored and when I scroll all the way to the bottom of the page I see there one picture. So I am asking that what I have to do to position that picture bottom of the page and also write some text over that picture.
If you wanna see that page with your own eyes here is link for ya ->

You must be registered for see links

Hope you understand me more now...

@bigdawg

 

[JayC]

This is exactly what that website is doing:

#footer {

1. background-image: url(
   You must be registered for see links
   );
2. background-repeat: repeat-x;
3. background-position: center 20px;
4. width: 100%;
5. margin: 50px auto 0px auto;
6. overflow: auto;
7. display: block;
8. clear: both;
9. color: #fff;

}

#footercontent {

1. width: calc(100% - 40px);
2. max-width: 1000px;
3. padding: 150px 20px 20px 20px;
4. margin: 0px auto;
5. color: #fff;
6. overflow: auto;

}

<div id="footer">
    <div id="footercontent">
        <div><a href="https://www.habbo.fi/" target="_blank"><img src="img/habbo_fansite-website_badge.gif" title="Bottila on virallinen fanisivu"></a></div>
        <div><span style="font-weight:600;"><a href="http://www.sulake.com/" target="_blank">Sulake Corporation Oy</a></span> tai sen yhteistyökumppanit eivät ole osa, kannata, rahoita tai nimenomaisesti hyväksy tätä fanisivustoa. Tämä fanisivusto saa käyttää <span style="font-weight:600;"><a href="https://www.habbo.fi/" target="_blank">Habbon</a></span> tavaramerkkejä ja muuta immateriaaliomaisuutta Habbon Fanisivustokäytännön myöntämän luvan mukaisesti.</div>
        <div>Copyright © Bottila 2011 - 2016 :: <span style="cursor:pointer;" onclick="alert('Versio 11.0.8, Seymour - BUILD3718');">Versio 11.0.8</span><br><a href="/ehdot" class="click">Käyttöehdot</a> - <a href="/haku" class="click">Haku</a></div>
    </div>
</div>

 

[Patriik]

This is exactly what that website is doing:

#footer {

1. background-image: url(
   You must be registered for see links
   );
2. background-repeat: repeat-x;
3. background-position: center 20px;
4. width: 100%;
5. margin: 50px auto 0px auto;
6. overflow: auto;
7. display: block;
8. clear: both;
9. color: #fff;

}

#footercontent {

1. width: calc(100% - 40px);
2. max-width: 1000px;
3. padding: 150px 20px 20px 20px;
4. margin: 0px auto;
5. color: #fff;
6. overflow: auto;

}

<div id="footer">
    <div id="footercontent">
        <div><a href="https://www.habbo.fi/" target="_blank"><img src="img/habbo_fansite-website_badge.gif" title="Bottila on virallinen fanisivu"></a></div>
        <div><span style="font-weight:600;"><a href="http://www.sulake.com/" target="_blank">Sulake Corporation Oy</a></span> tai sen yhteistyökumppanit eivät ole osa, kannata, rahoita tai nimenomaisesti hyväksy tätä fanisivustoa. Tämä fanisivusto saa käyttää <span style="font-weight:600;"><a href="https://www.habbo.fi/" target="_blank">Habbon</a></span> tavaramerkkejä ja muuta immateriaaliomaisuutta Habbon Fanisivustokäytännön myöntämän luvan mukaisesti.</div>
        <div>Copyright © Bottila 2011 - 2016 :: <span style="cursor:pointer;" onclick="alert('Versio 11.0.8, Seymour - BUILD3718');">Versio 11.0.8</span><br><a href="/ehdot" class="click">Käyttöehdot</a> - <a href="/haku" class="click">Haku</a></div>
    </div>
</div>

Well my CSS is now:

#footer {
    background-image: url('/css/images/footer.png');
    background-repeat: repeat-x;
    background-position: center 20px;
    width: 100%;
    margin: 50px auto 0px auto;
    overflow: auto;
    display: block;
    clear: both;
    color: #fff;
}

#footercontent {
    width: calc(100% - 40px);
    max-width: 1000px;
    padding: 150px 20px 20px 20px;
    margin: 0px auto;
    color: #fff;
    overflow: auto;
}

and my index page looks like this:

I assume that blue area is the footer.. Its not displaying the image....

this is my index pages code:

<?php require 'extra/header.php';?>

<title>MuddyMice</title>

<div id="footer">
    <div id="footercontent">
        testing this..
    </div>
</div>

So something is wrong? but what?