How to Change the Background to an Image

[NikkiB74]

I'm sure this has been covered but I searched the forum and could only find the tutorial on changing the colour viewtopic.php?f=15&t=3894

I'd like to change the color of the bg to an image. I have an image, I've renamed it bg.gif and ftp'd it over to my images folder. Within the text editor I have tried taking out the hex code before the (images/bg.gif) as this seemed to be overiding it, but since removing it I just get a white bg.

What is the glaringly obvious thing that I am missing?

url is http://nikkibackshall.com

Thank you,

[adew]

Nikki,

Replace the hex code with the word transparent. That should do it.

[CharlesClarkson]

Originally Posted by NikkiB74

What is the glaringly obvious thing that I am missing?

You attached an image text instead of pasting the actual text. :)

First, you are also missing the "url" in front of the url in the style sheet:

body {
	background: (images/bg.gif) top center repeat-y;
	color: #333333;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0px auto 0px;
	padding: 0px;
	}

Should be:

body {
	background: #ebebeb url(images/bg.gif) top center repeat-y;
	color: #333333;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0px auto 0px;
	padding: 0px;
	}

Second, you are centering the background image at the top of the page and then repeating it down the page (top center repeat-y). Since you have content in the foreground, the background image is completely blocked by the content.

So, I have to ask: How do you know this is not working, if you can't see what is behind the content?

Add this little JavaScript to your header (header.php) and perhaps things will become clear:

<script type='text/javascript'>
    jQuery(document).ready(function($) {
        $('body div, div *').css('background-color', 'transparent').css('background', 'none');
    });
</script>

HTH,

[NikkiB74]

Originally Posted by CharlesClarkson

You attached an image text instead of pasting the actual text. :)

Apologies for that - I was fiddling with it after I posted! The "url" was initially infront with the same results.

Originally Posted by CharlesClarkson

Second, you are centering the background image at the top of the page and then repeating it down the page (top center repeat-y). Since you have content in the foreground, the background image is completely blocked by the content.

So, I have to ask: How do you know this is not working, if you can't see what is behind the content?

Well, because I am only a beginner in WordPress, I assumed that if you can put a hex code in there and have it change the whole bg color then an image url would do the same thing. I'm still not sure why that isn't the case. If the content is the hex code, then I presumed that by removing it (or changing it to transparent) - it would allow the image to show - obviously not. The "top center repeat-y" was already there within the code and not something I added, so I figured it had better stay.

I put the piece of javascript in my header.php and it wiped out the whole header and turned my #wrap white too (I previously had this set to a light green #dfffe0).

I took out the code again and everything has returned to normal - except the #wrap which is now just taking on the color of the background *sigh*

ADE - I also tried changing the hex to transparent but this didn't do anything either. Sooo, I'm obviously not destined to be a WP stylist and will just stick to the basic colours - but would like my #wrap back if anyone knows how I can return it?

I'm sure that when I've changed bg colours before it was just a case of replacing the existing bg image within my image folder (or just the hex within the editor if it wasn't an image) - the same kinda thing as you do with logo.png. But it's been a while since I did it so I'm obvioulsy in a kerfuffle! <---- Love that word - any excuse to use it :D

(I'm still baffled as to why I can add a piece of code which changes stuff and then remove it again and it not just return to what it was, prior to me adding the code in the first place :? )

[adew]

ADE - I also tried changing the hex to transparent but this didn't do anything either. Sooo, I'm obviously not destined to be a WP stylist and will just stick to the basic colours - but would like my #wrap back if anyone knows how I can return it?

Nikki,

Is the idea that the tartan image will tile across the screen, like this?
[attachment=0:2juv8v7f]Nikki_bg.png[/attachment:2juv8v7f]
If so, in your CSS for the BODY tag, you should have this:

background: transparent url(images/bg.gif) repeat;

(I'm still baffled as to why I can add a piece of code which changes stuff and then remove it again and it not just return to what it was, prior to me adding the code in the first place :? )

We'd all like to the answer to that one. It happens to us all from time to time!

[NikkiB74]

Oh good - not just me then!

Just before I popped back - I used this "repeat scroll center top;" which has given me the tile of the bg as in your image - so next annoying question - why the annoying edge between each tile?

And will I be able to get my #wrap back or will I have to start from scratch?

[CharlesClarkson]

Originally Posted by adew

It's not #wrap. It's #content. #content inherits its background from body. Since body is now transparent, so is content.

And CSS kicks my a## too. :)

[CharlesClarkson]

Originally Posted by NikkiB74

I put the piece of javascript in my header.php and it wiped out the whole header and turned my #wrap white too (I previously had this set to a light green #dfffe0).

Actually, it turned almost all your container backgrounds to transparent, so you could see what was behind them. In my test, there was a tartan stripe down the middle.


HTH,

[adew]

That edge is in the image itself. Looks like there's a 1px white border all the way round. You can trim this in photoshop.

[NikkiB74]

Originally Posted by CharlesClarkson

It's not #wrap. It's #content. #content inherits its background from body. Since body is now transparent, so is content.

This is where I changed the colour initially. I just meant the bit around the edges of the content (I think I can hear an audible sigh from here)

#wrap {
background: #dfffe0;
width: 960px;
margin: 0px auto 0px;
padding: 0px;
}

Originally Posted by CharlesClarkson

And CSS kicks my a## too. :)

Thnx makes me feel better

Thank you both for your patience and help - I shall go off and do some tweakage and try and figure this out. The image doesn't have a 1px outline when I open it but is somehow getting one through the process of 'saving' it. Another little obstacle to figure out.

I will get there......

[adew]

Here's a cropped version:
[attachment=0:192u03sa]bg_new.gif[/attachment:192u03sa]

[NikkiB74]

S'ok - I re-upped it directly rather than editing via Gimp and the edge went on it's own - but thank you.

I have managed to get it sorted - so I'm well pleased! I couldn't have done it without the help and bouncing ideas around. It made me go off and check stuff out and find an answer. So I learnt some stuff!

Thanks to all - i'll be back with an equally irritating question later :D

[adew]

8-)

[tasha_ikon]

Hi am reading this page with a huge amount of intrest, trying to work out why i can not change my background.

My site is not published yet, and I am trying to change the background in landscape child theme, running off genesis - and I am a TOTAL wordpress beginner!!

I don't understand what hex means, and am really working hard to understand the changes I have to make at the moment.

I am not sure if anyone will be able to see my site at the moment - but I know I have to up a link in.....

http://www.d1203050-18381.cp.blacknight.com/

Please if you can advise I would be so happy!

Thanks
Tasha