My footer keeps getting pushed down by image!

Get Started
1

Hello everyone,

Here is my problem:

My index.html page has a background image that I want to place as the background image of the footer as well.

When I try to insert the background image, it just pushes the footer text downwards instead of going behind it like it’s supposed to! :confused:

Here is the html. I’m not sure whether you can see the problem based on this code. Since you’re looking at it, the page is also ridiculously wide!

Simple things I know, but I"m a novice and I 've learned it all following step- by- step guides. :slight_smile:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<meta name="keywords" content= />
<meta name="description" content="" />

<title>Name of Company</title>


<link href="css/stylesheet_index.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />



<!-- loads gallery lightbox script !-->
<script type="text/javascript" src="javascript/lytebox.js"></script>

<!-- loads gallery lightbox stylesheet !-->
<link rel="stylesheet" type="text/css" href="css/lytebox.css" media="screen" />

</head>

<body>
<img src="images/bg_splash.jpg" alt="background" longdesc="images/bg_splash.jpg" />
<div style="position:absolute; top:100px; left:50%; margin-left:-120px; font-family:Century Gothic, Helvetica, Arial; letter-spacing:5px; font-size:10pt; text-align:right;">
welcome to the website of ...<br />
<a href="about.html">ENTER</a></div>
</div>
<div class="footer">
<p>Insert footer content here.</p><br /><br /><span style="color:#FFF;">www.eva-toronto.com</span>
</div>


</body>
</html>

Here is the CSS

body {

margin:0px;

}

html {

margin:0px;

}

Thank you very much to anyone who takes a few minutes to read and respond to this. I appreciate your help.

2

Set it as the background-image of the body tag, rather than as an image within the body.

body {
  background-image: url(images/bg_splash.jpg);
}
3

I tried this code as is and I also set it as the background image for the class=footer ( that is where the image is needed, the body is fine) yet absolutely nothing changes.


 .footer {
 background-image: url(images/bg_splash.jpg);
}
4

is bg_splash.jpg large enough to cover both parts of the page?

5

Probably yes, but how can i be certain?

Sorry if that’s a stupid question.

6

Is the background image designed to be tiled (repeated in one or more directions)?

Uploading the webpage somewhere we can see, or at least providing a screenshot, could be really helpful.

7

I didn’t design the images so i’m not sure if it repeats. Based on the visual my guess is no it does not repeat because it’s not consistent from up to down, left to right. (If that makes any sense.

I will upload it tonight.

Thanks for your help. :slight_smile:

8

Here are the screenshots. The first one is the background image. The second one shows the footer(which was the original reason for posting.)

Hope this helps you to help me.
Thanks. :slight_smile: