Question 43453 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS: Put content in a footer with background image?

So I am creating a wrapper with header, body(content) and a footer, so a typical structure.

Header is done, body is done, now I am trying to make the footer, but I dont know how to do it the way i want.

For the footer I have a background-image and "in" the image I want more content to put in (like some links, buttons, etc. for example), but I just can’t find a solution for it.

<div class="wrapper">
    <div class="header">...</div>
    <div class="content">...</div>
    <div class="footer">
        <div class=footer-background">
            <img class="..."..... alt "Image">
        </div>
        <div class=footer-content">
            //Links, Buttons and other things
        </div>
    </div>
</div>

The footer-content part is done and looks how I wanted, now my question would be, how I put the content above the background image of the footer?
Is the placement there right or do I have to solve this in a completely different way?

I tried it already with:

footer-background {
...
top: -100px;
...
}

footer-content {
...
top: -250px;
...
}

With that I kinda have what I want, but then I have a white space underneath the footer and that must not be there in any case. Probably I am too stupid and the solution is easy, but I am thankful for every help I get!

Tags:

2

Answers


  1. 0

    Try this:

    .footer {
   background-image: url('https://www.tutorialkart.com/sample_image.jpg');
}    
    <div class="wrapper">
    <div class="header">...</div>
    <div class="content">...</div>
    <div class="footer">
        <div class="footer-background">
            <p>Links, Buttons and other things</p>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Did you try inserting the image from css using background-image: url(then insert your jpg url here) and changing background size to ‘contain?

    .footer-background {
        background-image: url(https://images.wherever.com/...);
        background-size: contain;
    }

    If you do this, you can add your links in the HTML without having to work tamper with margins.
    Try it and let’s knwo if it’s a fix

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search