By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,564 Members | 804 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,564 IT Pros & Developers. It's quick & easy.

Background image for text

P: 5
I have defined a css stylesheet and have a particular style defined as follows:

Expand|Select|Wrap|Line Numbers
  1. .main_body_booked { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; font-weight: bold ; text-decoration: line-through; background-color: #FFFF00}
  2.  
When I write some simple HTML code as follows:

Expand|Select|Wrap|Line Numbers
  1. <span class="main_body_booked" >6</span> <img src="Images/booked.jpg" width="10" height="10">
  2.  
then the number 6 is displayed with a yellow background as I would expect.

However, when I define the style in the css stylesheet to display the background image "booked.jpg" (in the sub-folder "Images") either as follows:

Expand|Select|Wrap|Line Numbers
  1. .main_body_booked { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; font-weight: bold ; text-decoration: line-through; background-image: url(l/Images/booked.jpg)}
  2.  
or as

Expand|Select|Wrap|Line Numbers
  1. .main_body_booked { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; font-weight: bold ; text-decoration: line-through; background-image: url(/Images/booked.jpg)}
  2.  
then there is no background displayed. The 2nd part of the HTML code above is simply to prove that there is an image "booked.jpg".

Can someone please help and tell me what I am doing wrong.
Feb 3 '08 #1
Share this Question
Share on Google+
9 Replies


drhowarddrfine
Expert 5K+
P: 7,435
It works for me. Are you sure the image is relative to where this html document is?
Feb 4 '08 #2

P: 5
Thanks drhowarddrfine - it's nice to know that you've got it to work.

I believe that I have got the site structure correct. In my root folder I have the HTML code and CSS file and a folder called "Images". In the folder called "Images" I have placed the image "booked.jpg".

I was using Dreamweaver to define the CSS file and when looking for the image defined it "relative to the Document" as follows:

Expand|Select|Wrap|Line Numbers
  1. .main_body_booked { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; font-weight: bold ; text-decoration: line-through; background-image: url(/Images/booked.jpg)}
  2.  
and the other one "relative to the Site Root".

Expand|Select|Wrap|Line Numbers
  1. .main_body_booked { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; font-weight: bold ; text-decoration: line-through; background-image: url(l/Images/booked.jpg)}
  2.  

I also included in the HTML code "an inserted image" to ensure that I display the image correctly:

Expand|Select|Wrap|Line Numbers
  1. <span class="main_body_booked" >6</span> <img src="Images/booked.jpg" width="10" height="10">
  2.  
So, do you get two displays, one with the number 6 superimposed on the image and one with just the image?
Feb 4 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
Yes. .
Feb 4 '08 #4

P: 5
Thanks drhowarddrfine for the confirmation. I must be doing something fundamentally wrong. I've even copied the image to the same folder as my CSS file and the web pages but it will still not display the image in the background. Background colour yes but not the image.

I am assuming that I don't need to replace the "url" part of the declaration with anything....or do I?

Have you declared the image reletive to the Root or to the Directory by the way?
Feb 4 '08 #5

Death Slaught
100+
P: 1,137
You're not putting your url in single quotes.

Expand|Select|Wrap|Line Numbers
  1. background-image: url('location.jpg');
^_^ Hope it helps, Thanks, Death
Feb 4 '08 #6

P: 5
Thanks Death. That's it. Interesting that Dreamweaver hadn't added the single quotes. Your assistance has been much appreciated. Now just need to work out how to get the image to "stretch across" a single cell in a table.
Feb 4 '08 #7

Death Slaught
100+
P: 1,137
Thanks Death. That's it. Interesting that Dreamweaver hadn't added the single quotes. Your assistance has been much appreciated. Now just need to work out how to get the image to "stretch across" a single cell in a table.

No problem it's what i'm here for.

Unfortunately I don't think you can 'stretch' a background image. You can have it repeat but I don't think that's what you want.

So you could try something like this.

HTML

[HTML] <table>
<tr>
<td>
<img src="Image.jpg" alt="" />
</td>
</tr>
</table>
[/HTML]

CSS

Expand|Select|Wrap|Line Numbers
  1.  table tr td img { 
  2. z-index:-1;
  3. width:100%;
  4. }
  5.  
The z-index will put the image behind everything else, and the width will make it cover the entire cell (well most of it depending on how big the cell is).

^_^ Hope it helps, Thanks, Death
Feb 4 '08 #8

P: 5
Thanks for the suggestion Death. I appear to have solved it a different way. It's a dynamic calendar (3 x 4) that I am trying to produce using Javascript. I've restricted the size of each cell. Then I created the required image in Corel Draw, exported it as a jpg, processed it using Photoshop to ensure that the size was the same as my cell sizes and saved it for the web. All seems perfect so can publish the web site soon!! Thanks again.
Feb 5 '08 #9

Death Slaught
100+
P: 1,137
No problem it's what I'm here for. Good Luck!

^_^ Thanks, Death
Feb 5 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.