Repeating an image horizontally across the banner?!

  • audiosco

    (@audiosco)


    12 years, 6 months ago

    Hey everyone,

    I’m very new to HTML and CSS coding, but have been working on a website, editing the Minimatica template to create a slightly different design.

    Here’s the link to what I’ve got so far:
    link

    Now, what I really want to do is take an image of film reel borders:

    link

    and loop it right across the header and footer behind the text at the top and the social media icons at the bottom.

    I worked out how to do this all in CSS and tried it in a sandbox- it worked perfectly:

    body
{
background-image:url('http://audioscoundrels.com/wp-content/uploads/2011/10/Bannerloop4.png');
background-repeat:repeat-x;
}

    But editing various parts of the stylesheet has not yielded the same results at all, unfortunately.

    The file I’ve been adding to is the ‘header’ template. I added an image in HTML and it appeared fine. But when I try and put it as a background it just doesn’t come up at all, let alone when I try and do ‘x repeat’ on it.

    This has been frustrating me for days- I really don’t know how to get this simple idea functioning.

    Here is the code (including the failed code to try and repeat the banner image). I hope that someone can make head or tail of it:

    [code moderated - please follow the forum guidelines for posting code]

    I apologise for my lack of appropriate terminology- I'm really new to this and just want to get the page looking right.
    Here's a mockup of what I really want it to look like- I just edited this together on some imaging software.

    link

    Thanks very much for all your time- I really look forward to hearing your answers, and if there is a simple solution for my problem, please don't hesitate to let me know!

    Cheers,
    Rob

Viewing 7 replies - 1 through 7 (of 7 total)
  • Rev. Voodoo

    (@rvoodoo)

    12 years, 6 months ago

    You are inserting css into your theme all wrong!

    First up, any reason to go in header.php? why not put it in style.css? Thats where css would normally go!

    BUt if you insist on putting it up in the header file, you need to wrap it in style tags

    <style type="text/css">
your css
</style>

    to recap, if you put css in your php file, it needs to be wrapped in style tags. However, you have a style.css file which has your css in a WP theme. You may already have rules applying to the body element in that stylesheet

    Thread Starter audiosco

    (@audiosco)

    12 years, 6 months ago

    Hi, thanks so much for the feedback. I thought that might work, as when I tried it in an HTML Sandbox it was fine, but alas, it seems like it won’t work that easily.

    I’ll try editing in the style sheet- do you know whereabouts in the style sheet I would have to make an alteration?

    Thanks very much, here is a copy of the stylesheet if you get a chance to look:

    [1100 lines of CSS moderated as per the Forum Rules. Please just post a link to your site.]

    Rev. Voodoo

    (@rvoodoo)

    12 years, 6 months ago

    YOu don’t need to post your css, we can see it by looking at your site.

    Have you already been adding stuff? The top looks like

    div#header {
background-color: Black;
}

@charset "utf-8";
/*
Theme Name: Minimatica
Theme URI: http://www.onedesigns.com/wordpress-themes/minimatica

    Nothing should go above the theme information in that sheet, it goes under that

    If you scroll down about 30 lines or so, you’ll see:

    body {
	background:#FFF;
	color:#000000;
	font-family:"Vegur", sans-serif;
	font-size:16px;
	line-height:18px;
}

    That’s your body style

    Thread Starter audiosco

    (@audiosco)

    12 years, 6 months ago

    Ah right, I’ve taken the stuff out of the top of the stylesheet.
    So how would I go about repeating the image horizontally in the banner? I tried applying the background image code but it didn’t seem to work.
    Thanks,
    Rob

    Thread Starter audiosco

    (@audiosco)

    12 years, 6 months ago

    Ah awesome, I’ve got it working now!
    Thanks for your help, really appreciated 🙂

    Thread Starter audiosco

    (@audiosco)

    12 years, 6 months ago

    Ah, there’s more unfortunately.
    I need to replicate the same background for the banner at the bottom of the page, and it’s not as simple as I thought it was going to be.
    Whereabouts in the CSS would the settings for that be?

    Thanks

    Rev. Voodoo

    (@rvoodoo)

    12 years, 6 months ago

    http://www.css3.info/preview/multiple-backgrounds/

    May help you out. You can do multiple bg images, for browsers that support it. Which is most modern browsers these days

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Repeating an image horizontally across the banner?!’ is closed to new replies.