CODEWITHSUNDEEP
htmlbackgroundfooter
user1973379
user1973379

Reputation:

Background & Footer problems with HTML

I have a very basic understanding of html. VERY basic.

Im tidying up my blogger site to replace my google-sites website. This is just a portfolio site, so all that matters are the looks.

http://toddingtontoons.blogspot.com

My problem is the footer. Essentially I want the footer and background to line up no matter the resolution.

The code for the background is as follows. 

background: url(https://sites.google.com/site/toddsetter/TODDINGTONTOONSTOP.png) repeat-x, 
url(https://sites.google.com/site/toddsetter/TODDINGTONTOONSBOTTOM.png) repeat;
background-position:center;

The footer is just a centered img within the blogger footer template. It will eventually have links to go home and elsewhere.

At the moment the footer is perfectly lined up with the bg until the screen is smaller than 1280 width.

I have tried alsorts of ridiculous stuff I don't understand and keep coming across problems. Can somebody please suggest how they would approach this problem?

I have been trying to alter the footer to act differently and also been trying to make the bg only center when the screen is wider than 1280. I just want the Background to cling to the body of the blog.

Any input would be greatly appreciated.

Upvotes: 1

Views: 471

Answers (1)

arttronics
arttronics

Reputation: 9955

jsFiddle DEMO (Remove /show/ in URL to access jsFiddle edit page.)

When you look at the HTML page for your website, you have a separate navigation section and a separate content section.

The issue with the footer is from that section residing inside the content section.

Relocate the footer so it's outside that section and reconfigure your CSS accordingly.

Basically, it comes down to a layout issue.

Current:

<body>
  <nav></nav>
   <content>
     <footer></footer>
   </content>
</body>

Recommended:

<body>
  <nav></nav>
  <section></section>
  <footer></footer>
</body>

A starting point is to first fix these errors in your webpage.

Then, use the relevant background images in the body, nav, section, and footer sections as background-images.

For detailed comments and tips, look at the jsFiddle CSS panel in the above demo.

Side note: In your current markup, you have HTML comment syntax (i.e., <!-- --> ) inside CSS script tags. Instead, you need to use CSS comment syntax (i.e. /* */ ). The other option is to use HTML comment syntax outside the script tags.

Upvotes: 2

Related Questions