Repeating .gif to make header image

by 8 replies
12
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
#website design #gif #header #image #make #repeating
  • 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;
    }
  • 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!
  • 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.
  • 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.
  • ...and I paste that code in the html version of my services page or in the header.php of my theme editor?
  • Paste it into the HTML version of your services page.
  • 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:







    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
    • [1] reply
    • Repeat can only be done with css not the img element. Use a division and set background image.
Join the discussion

Next Topics on Trending Feed

  • 12

    Repeating .gif to make header image

    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.