Help - Search - Members - Calendar
Full Version: A Wood Grain Background?
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS
WheresMyHippo
Hello all, my site, Where'sMyHippo is currently in a blog format, with a rather fluid layout. I am looking to change the background it currently is set to, to a nice wood grain background that gradually gets darker and darker the further down you scroll until it turns completely back. The problem is, I'm not sure how I should go about making the graphic in terms of dimensions and such.

Reading back over this, it still seems a bit unclear for what I am asking, but I will try to find an example online.

Thank you in advance.


EDIT:

I attached the background I would like to use, as you can see, towards the very top ends it fades to completely black, I would like to sort of tile this for my background to make it look like a full wood background without the huge file size that would entail.

I than went ahead and uploaded it and pointed it towards the new background file.

CODE
body {
    background: #000000 url(images/bgsss.jpg) repeat-y;
    color: #333333;
    font-size: 12px;
    font-family: Arial, Helvetica, Sans-Serif;
    margin: 0px auto 0px;
    }


I have never worked with CSS, and for some reason the background is just appearing on one side of the blog colomn.

ANy ideas?
k.digennaro
Try something like this
CODE

body{
background: #000 url("images/bgsss.jpg) repeat-x;
width: 100%;
height: (height of the image);
}


Kevin DiGennaro

Edit: the other codes you have in there are for text, don't think you need them. Unless you have text you want to add to your background. Really just depends on the layout.
WheresMyHippo
Tried a few things but really caused havoc on the body or the background, or both sometimes. posted that screenshot of what I was trying to do. thanks for the help.
k.digennaro
Alright sorry bout that, I'm back, I'm taking a look at it as we speak should be able to fix it in no time.

Kevin
WheresMyHippo
Right on, i tried to just manipulate the graphic, but that didnt seem to get it. appreciate you coming back too!
k.digennaro
Not a problem, would you mind zipping up your files and sending them to me? or atleast the image or the PSD, having a hard time coding to this image, I'm just recoding the whole thing, that way I know its coded right wink.gif

Thanks,
Kevin
WheresMyHippo
sure thing, thank you so much too!

www.wheresmyhippo.com/mysecret.zip
k.digennaro
is this a wordpress blog?

taking a bit longer, thought you were using HTML/CSS, and its mainly php, but i should be able to get it.

Kevin


Edit: I'm sorry but ive got to go for a bit, got a place to be. Should be back later tonight, Ill try to get this done for you by tonight.

Kevin
WheresMyHippo
ahh thank you very much, step out for a bit myself, appreciate all your work.
Adam
If you want to use that background image on your site, do the following in your style.css for this theme.

CODE
html
{
    background: #000000 url(  location of the new background image   ) repeat-x;
    margin: 0px auto;
    text-align: center;
}

body {
    background: #FFFFFF;
    color: #333333;
    font-size: 12px;
    font-family: Arial, Helvetica, Sans-Serif;
    margin: 0px auto 0px;
    width: 600px;
    }


I have tested this, and it will work if you just replace your body tag with the code above. We are adding a HTML tag.

Oh, and I moved this to the correct forum.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.