WordPress.org

Ready to get started?Download WordPress

Forums

Main background is showing through footer and headers rounded corners (8 posts)

  1. red88music
    Member
    Posted 6 years ago #

    Hi,

    My problem is that the image which gets repeated up and down the page is peeking through from behind my footer and header.

    You can see the problem clearly by visiting my website and scrolling down to the bottom / up to the top:
    http://red88music.co.uk

    I have tried putting padding and margins on just about everything to no avail.
    Any ideas?

  2. jbbrwcky
    Member
    Posted 6 years ago #

    The #header has a transparent background that's why it's peeking through.

    Re-create the header.png file with the top bit of your background integrated in.

  3. red88music
    Member
    Posted 6 years ago #

    Thanks for the quick reply.

    I don't think that will work as my background it fixed.
    It also doesn't solve the problem with the footer.

  4. red88music
    Member
    Posted 6 years ago #

    So I was thinking, and I have come to the conclusion that no matter how much padding etc I use, because the header and footer are in #page, they will always have that background.
    Which then suggests if I take these two elements out of the #page then it Should work?

  5. red88music
    Member
    Posted 6 years ago #

    Anyone? :P

  6. red88music
    Member
    Posted 6 years ago #

    I have made a bit of progress:

    I realised that because the header and footer were contained within the page div, they would always have the background.
    So I have tried to take the header and footer divs out of the page div.

    Small problem:
    I was toying around with this idea earlier, and here are the results -

    Original: http://red88music.co.uk/Red_88v1.htm

    <div=id"page">
    	<div=id"Header"></div>
    	<div=id"Footer"></div>
    </div>

    Edited Header (Which works): http://red88music.co.uk/Red_88v2.htm

    <div=id"Header"></div>
    <div=id"page">
    	<div=id"Footer"></div>
    </div>

    Edited Header & Footer (All goes wrong): http://red88music.co.uk/Red_88v3.htm

    <div=id"Header"></div>
    <div=id"page"></div>
    <div=id"Footer"></div>

    I can't work out why the last one just kills the page?

  7. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    Your page div doesn't have any content to force it to extend the background image to the bottom of the page. Your content and sidebar are both floating and so don't actually count as being "inside" that page div.

    Just before you close the #page div (after the content and sidebar), add this code:
    <div style="clear:both;"></div>

    That will add an empty div with no content, but which must clear the two columns, which extends the div down and forces the background to be drawn.

  8. bradstinyworld
    Member
    Posted 6 years ago #

    rather than the way you are going about it with '<div>' tags I would suggest working your rounded corner background into a definition list like I use here http://wwww.wtfarewegoingtodonow.com and http://www.ryannichole.com You are operating on a larger scale, but the principle is the same.

Topic Closed

This topic has been closed to new replies.

About this Topic