How to add a background image behind the header?

Permalink 1 user found helpful
Hi there -- I'm trying to get an image at the top of my pages, identical to this page with the illustration:

http://ianimate.net/

Is this possible in C5? I can only find ways to do a tiling background image. Thanks in advance!

John

View Replies:
Hypocrite replied on at Permalink Reply
Hypocrite
Of course.

You can make your own theme and set a background image with CSS which is positioned relative to your container div.

For example that site is using an image like this:
http://ianimate.net/templates/rt_quantive_j15/images/backgrounds/st...

It is just centered horizontally and not repeated. Then the container div is laying on top of it.

You can try something like this:
<style type=”text/css”>
<!–
body {
background-color: #ffffff;
background-image:url(bg.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#container {
width: 940px;
margin: 0 auto;
}>
</style>
jmalaska replied on at Permalink Reply
Thanks! This is awesome. Where would I put this code? In the main.css or elsewhere? (Sorry, I am really new to coding)

Thanks so much again for the help!
Hypocrite replied on at Permalink Reply
Hypocrite
To the top of your main CSS file.

Note: I fixed the CSS code a bit.
jmalaska replied on at Permalink Reply
Thanks again! I dropped in the code to the main.css file at the top. Unfortunately my test image isn't showing up. I edited the code to make it tile horizontally too, but no dice. Any idea what the issue might be?

Thanks again! Sorry to be a bug.
Hypocrite replied on at Permalink Reply
Hypocrite
First guess would be that the path to the image is wrong. Try using an absolute path, for examplehttp://www.yourdomain.com/themes/themename/img/bg.jpg...
jmalaska replied on at Permalink Reply
Thanks again. No dice still :(
Hypocrite replied on at Permalink Reply
Hypocrite
Do you have a link to your site?
jmalaska replied on at Permalink Reply
Adreco replied on at Permalink Reply
Adreco
John,
Your background image URL seems to be incorrect. I'll look at it after dinner and see if I can suggest an alternative.
Steevb replied on at Permalink Reply
Steevb
Your path is wrong.

You dont need all that styling;

background-image:url(/concrete/themes/dark_chocolate/http://johnmalaska.com/files/4013/1914/8974/phils_head.jpg);
background-repeat: repeat-x;
background-position: top center;


Call the image from wherever you put it, for example:
body {background: #000 url(images/phils_head.jpg) no-repeat top center;}


hope that helps

Steev
Adreco replied on at Permalink Reply
Adreco
Steev's example is certainly the clean way to achieve what you want. Please note, you should place your image in Concrete-Themes-Dark_Chocolate-Images folder, not your file manager for best results.
jmalaska replied on at Permalink Reply
Excellent, that did it thanks!

Special thanks to Hypocrite as well!!!