Using an Image as a Background - Post...

User 2276240 Photo


Registered User
194 posts

I did search on this subject, but did not find an answer to my issue, so I am hoping that I can get an answer from all of the talent on this site.
I created an textured image file in PSP and saved it to the graphics folder in my main directory that the web page is in. I was using the Style Sheet Maker and in the CSS Color and Background window I select the image I saved in Background Image section. when I put the style sheet text in the web doc, the images does not show,just a white back ground.

Here is what the style sheet looks like;

<style type="text/css">
<!--
body {font-family: Arial, Arial Narrow, Sans-serif; font-size: medium; background-image: url(04 Commemorative.jpg);}

-->
</style>

Thanks
User 187934 Photo


Senior Advisor
20,271 posts

Try removing the spaces from the name of the image. Also make sure your image is .jpg and not .JPG on your host:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2276240 Photo


Registered User
194 posts

Thanks, but I should have been a little clearer on this. The text I posted was a second try. The first attempt, was to use one of the images I made in Paint Shop pro. It was a 200x200 image with a simple name bgcolor1.png. When it did not show, I tried the image listed above because I have used it and it shows as an image file with in a page (not background).
User 122279 Photo


Senior Advisor
14,649 posts

The css for a background image is like this:

body {
background-image: url("path_to_image/image.jpg");
}


You have no double quotes inside the paranthesis. Also, your image name seems to consist of two words, or rather a number and a word with a space in between. Rename your image so that the name is without spaces, like this: 04commemorative.jpg or 04_commemorative.jpg.

Your code implies that the image and the document where you want to have it as the background are located in the same folder. If you have the image typically in a subfolder named 'images' or something like that, you have to write the url as images/04commemorative.jpg.

Added: I see Eric has beaten me to a reply. Just as he is warning you about jpg versus JPG, make sure that the c in Commemorative is the same case in the file name and any reference to it.

Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,649 posts

Another thing: In your font stack I see you have among others Arial Narrow. Also font names which consist of more than one word need to be surrounded by double quotes, so "Arial Narrow" would be better. :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2276240 Photo


Registered User
194 posts

I see what the issue is now, I have it working. What happens in the Style Sheet Maker, it does not insert the complete path or the double quotes inside the Parenthesis. I now have this:

BODY { background-image: url("Graphics/bgcolor2a.jpg"); }

This is what the Style Sheet Marker inserts:

BODY { background-image: url("bgcolor2.png"); }

Thanks for the help and maybe Coffee Cup can look into this issue.
User 122279 Photo


Senior Advisor
14,649 posts

Good that it is working.

Style sheet maker is an old programme, and I'm not sure how well a background image was implemented in the early versions of css. In those days it was still a common thing to have a table as help for the layout and have an image positioned as a cell background, and that was usually done in html, not css.

A much better and up to date css creator is built into the HTML Editor. I'm not sure if CC will make it a stand-alone programme, but it's certainly an interesting thought.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.