Where do I put my background image?

https://www.contagioushair.com

I have the sexy pink template with a little customization in the header that I did myself:flex:, lol. Anyway so I have a background image that I want to put on my template so it looks like butterflies flowing in the background but I donno where to put it.

I tried placing it in the style CSS file where it says background image but it won't work. I tried just placing the link there (it's hosted in photobucket) and I've tried uploading the image to the template directory and putting the directory location there but neither work.

I know I'm at the right place (I think) because I can change the background color. Anyone know what I'm doing wrong?

TIA

First, I'd suggest that you move the image to your /image directory. It'll load faster.

Where do you want the image to appear? If you look at the Fan Odyssey site in my sig, the black and white starfield background is an image and it's in the stylesheet.

Thanks afo,

Yes, that is where I want my image to appear. Just like this site https://www.joyastylehair.com where the background is black with pink and white dots. I just created a little image 180x180 butterfly.jpg so that when I load it on my template it should look similar to this background http://www.coversoftwarepro.com/

I do have the image uploaded in my images folder in my template directory. I just don't know where to put it in my CSS. This is what that portion of my CSS looks like now:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #3B3B39;
background-color: ;
background-image: url(public_html/contagioushair/includes/templates/SexyPink/images/butterfly.jpg);
background-repeat: no-repeat;
background-position: center top;

The highlighted part is what I've been focusing on. I've put the url to the image and even the directory location of the image and nothing.

TIA and I hope this helps you help me better :blush:

Try this instead:

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #3B3B39;
	background-color: #ffffff;
	background-image: url('../includes/templates/SexyPink/images/butterfly.jpg');
	background-repeat: y;	}

I took this out: background-position: center top;

And this is what my CSS looks like:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #3B3B39;
background-color: #ffffff;
background-image: url('../includes/templates/SexyPink/images/butterfly.jpg');
background-repeat: y; }

Identical to yours but it won't show up when I refresh.

As long as you have the image in includes/templates/YOUR_TEMPLATE/images you can use the following:

background-image: url (../images/FILENAME.JPG);

when you call an image from the stylesheet the path is relative. So that reads like....Up one level, over to the images directory, get FILENAME.JPG

:yes:Oh thanks Barco - that worked. Now I just have to go in and edit my image a bit more because I don't like it, lol. But thanks again babe and you too afo!!!!