12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Repeating .gif to make header image

by Mike Murphy
8 replies
  • WEB DESIGN
    • |
Pardon the newb question but I'm adding a page onto one of my websites and want it to look the same so it doesn't feel like the visitor has gone o a whole new site.

My main site is at immikemurphy.com and then I'm going to add /services onto that where I'm listing the services I have available.

If you look at the top of the main page, the black and red header is a tiny little gif that repeats over and over again.

How do I make it repeat over and over on the services page?

Thanks
Mike
#gif #header #image #make #repeating
  • Profile picture of the author codecre8r
    Are you going to add this new page in WordPress or as a separate HTML/PHP page? If you add the page in WordPress, the style will remain consistent as with the About page.

    If you're going to create a plain HTML/PHP page, you'll need a bit of CSS to make this work. Your header DIV will look something like this in CSS:

    #header {
    background-image: url(images/header_bg.gif);
    background-repeat: repeat-x;
    background-position: top;
    }
    {{ DiscussionBoard.errors[530196].message }}
  • Profile picture of the author Cpt Jack Sparrow
    Hey Mike,

    i believe your site is Wordpress based... So as Codecre8r said .. u can simply go to yr WP admin and create a new Page and the same style will; be applied to this new page .. Hope that helps!
    Signature
    WSO - 25% Off On Mini Sites Ecovers and Graphics

    EcoverKing - Professional and Crisp Minisite Graphics, eCovers, Headers etc.

    Graphic & Web Design Portfolio
    {{ DiscussionBoard.errors[530238].message }}
  • Profile picture of the author Mike Murphy
    Yep, it is a Wordpress site, but when I add the page, it doesn't look very....pretty. Have a look, I've added it very roughly.

    Maybe it just needs to be cleaned up as all of the services were inside a table.
    Signature
    Guitar PLR - New MONSTER Guitar Video PLR Pack![LIMITED]
    {{ DiscussionBoard.errors[530270].message }}
  • Profile picture of the author codecre8r
    Add the following code before your </head> tag:

    <style>
    body {
    background-image: url(/wp-content/themes/ifm%20adsense/images/header_bg.gif);
    background-repeat: repeat-x;
    background-position: top;
    }</style>

    There's a lot you could do to clean up this page with CSS, but this will get your header to display using the existing code.
    {{ DiscussionBoard.errors[530334].message }}
  • Profile picture of the author Mike Murphy
    ...and I paste that code in the html version of my services page or in the header.php of my theme editor?
    Signature
    Guitar PLR - New MONSTER Guitar Video PLR Pack![LIMITED]
    {{ DiscussionBoard.errors[530900].message }}
  • Profile picture of the author codecre8r
    Paste it into the HTML version of your services page.
    {{ DiscussionBoard.errors[531369].message }}
  • Profile picture of the author L1sbeth
    Hi, sorry, also complete newb to this. I'm doing the same thing only in dreamweaver cs4.
    The code for my gif in the header is:
    <div class="wrapper col3">
    <div id="featured_slide">
    <dv id="featured_content">
    <div class="featured_box" id="fc1"><img src="../images/14.09-small.gif" width="900" height="182"/></div>
    </div></div></div></div>


    What extra bit of code to I have to put in to make it repeat please? Any help appreciated, never done anything like this before!

    Thanks
    {{ DiscussionBoard.errors[4675063].message }}
    • Profile picture of the author lovenot
      Originally Posted by L1sbeth View Post

      Hi, sorry, also complete newb to this. I'm doing the same thing only in dreamweaver cs4.
      The code for my gif in the header is:
      <div class="wrapper col3">
      <div id="featured_slide">
      <dv id="featured_content">
      <div class="featured_box" id="fc1"><img src="../images/14.09-small.gif" width="900" height="182"/></div>
      </div></div></div></div>


      What extra bit of code to I have to put in to make it repeat please? Any help appreciated, never done anything like this before!

      Thanks
      Repeat can only be done with css not the img element. Use a division and set background image.
      {{ DiscussionBoard.errors[4675227].message }}

Trending Topics