Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Background Images not showing in CSS
Greetings,
I am new to TXP, so forgive me if this question seems rather rudimentary. I have been able to customize my site except for the background images from CSS file. These images are the only ones not showing up. I have read numerous posts about this issue, and I have tried troubleshooting based on the suggestions from previous members and I still cannot get them to show up. Here is the CSS coding:
#main-inner { background: url(“bg_main-inner.gif”) repeat-y left top;
margin: 0 auto;
position: relative;
width: 730px;
}
I have tried to replace the url(“bg_main-inner.gif”) component with textile code, textpattern code and even XHTML using the absolute path to the image and it will not show up when I view the site. Any suggestions on what I am doing wrong or what to try would be appreciated and welcome.
Offline
Re: Background Images not showing in CSS
Your CSS looks fine, so the next step is to check the image path i.e – /images/bg_main-inner.gif or even an absolute URL like http:yourdomain.com/images/bg_main-inner.gif
Might also be worth looking at the image name. If you uploaded the image via TXP, then the image will have a number instead of a name – for example, 2.gif. If you visit the Images tab you can find the image id.
Offline
Re: Background Images not showing in CSS
Have you uploaded those images via Textpattern’s images-tab? If so, image names have been changed to numerous, like 1.gif, 2.gif etc, depending of the id of the upload-image.
Secondly, if you write the full image path to the browser’s addersbar, are you able to see the image?
Cheers!
Offline
Offline
Re: Background Images not showing in CSS
To jstubbs and Gocom, I appreciate the prompt replies! I did use TXP to upload images and therefore they have changed to a numerical id. I was not aware of that, so I appreciate the lesson. I am convinced, as is jstubbs, that it has to do with the path. I have tried “images/5.gif”, which would be the relative path with the numerical id and it does not show up. I have also tried Gocom’s suggestion of typing in the absolute path to see if it appears and I still cannot get the image to appear. I am continuing to try various combinations as this only affects the background images in my stylesheet and nothing else. Thanks for the input, I appreciate the expertise.
Offline
Re: Background Images not showing in CSS
Patrick, if its not the URL and not the image id # (which you need if you uploaded the image with TXP), then it can only be a case of a clash with another style in your CSS.
Why not try and place the image as a BG for another element, and see if it shows up?
Also worth flushing the cache, just in case.
Offline
Re: Background Images not showing in CSS
Now that you mention it jstubbs, I do have the same images for two different id selectors in my CSS:
#main { background: #fff url(“bg_main.gif”) repeat-x left top;
text-align: left;
padding: 15px;
height: 400px;
}
#main-inner { background: url(“bg_main-inner.gif”) repeat-y left top;
margin: 0 auto;
position: relative;
width: 730px;
}
#main2 { background: #fff url(“bg_main.gif”) repeat-x left top;
text-align: left;
padding: 15px;
height: 950px;
}
#main-inner2 { background: url(“bg_main-inner.gif”) repeat-y left top;
margin: 0 auto;
position: relative;
width: 730px;
}
If this is causing the issue, do you think it would work if I changed the images so no two are the same? Also, how do I clear the cache in TXP? I think I will try that first to see if it solves the issue.
Offline
Re: Background Images not showing in CSS
Now that you mention it, I do have the same images for two different id selectors in my CSS…
It’s okay to use the same image as a background for different items.
CSS overriding only happens if, for example, you define a background for #main and then later a background for something with a higher specifity, for instance body#mysection #main (one does this on purpose sometimes to make a header image change from section to section without changing the HTML). The other problem that can happen is you have overlaid backgrounds, e.g. you make a div with a background, put another div inside it with another background that lies on top of the first. If you have your site online we can debug that quickly.
I have tried “images/5.gif”
You may just be missing a forward-slash at the beginning there, but to be safe:
Log into your textpattern admin area > Admin Tab > Advanced sub-area and note the name of your image directory (for example mine’s images but your’s may be different).
Then in your browser address window where you normally type www, enter http://www.yourdomain.com/images/5.gif (replacing the relevant part with the name of your image directory and 5.gif with whatever image ID# and gif/jpg/png extension your image has in the admin image tab). You should be able to see the image in the browser on its own. If not, this is where you should look for the problem.
Now enter everything after the domain name in your css: background: url("/images/5.gif"); with the forward slash at the beginning (again replacing the relevant directory name and image number and type).
Note: if your install is in a subdirectory you’ll need to add that before the image directory, e.g. /subdirectory/images/5.gif
Last edited by jakob (2007-11-17 19:50:41)
TXP Builders – finely-crafted code, design and txp
Offline
Re: Background Images not showing in CSS
Many thanks to jstubbs, Gocom and Jakob for their input on this problem. It turned out to be a syntax problem on my end. Upon using the absolute URL as mentioned by all, the images did show up. I look forward to learning more with TXP and it is nice to know that their are great people in a forum like this to assist. I am indebted to all for your time and help!
Offline
Re: Background Images not showing in CSS
Glad you got it working. Everybody helps each other over here, so if you need any help later, just let us know.
Offline