Thursday, November 15, 2012

Answers > How to Add a Background Image to a Table Created in Xhtml?

How to Add a Background Image to a Table Created in Xhtml?

by nForms on April 19, 2012

How do I put an image I have downloaded from the net onto my back ground. I know the code (from w3 schools) but I don't know how to save it correctly and then how to put in the URL so the computer can find it. Do I need to save any image I use as a jpeg? If I put it into my documents how do I correctly address it when entering the code.

Tags: , , , , , ,

Similar XForms | XML Posts

{ 4 comments… read them below or add one }

Ron July 3, 2011 at 9:35 pm

If you are making a web page, put all the files you use into a common folder that is to be used as your "root directory". If you plan to have lots of images, make a sub-folder called "images" to put all your images in there. When saving from the web, just be sure to save all images to that folder. You will be allowed to browse to it once the save window pops up. Rename file before you save if you wish.

If you plan on NOT publishing the web page anywhere and you do NOT want to make a "root" folder for your files, then the paths to your images will be very long indeed. Example:


Whatever the path with files outside of where your HTML page is, be sure this is used: "file:///C:/"

You can use inline CSS if you do not know how to use external or embedded CSS. For your table tag and background image:

style="width: XXpx; height: YYpx; margin: 0 auto; background: url(path to bg image) no-repeat center scroll;"

Be sure width and height is enough to show complete image if it is NOT to be tiled.


Haider July 3, 2011 at 9:35 pm

dunno plz tumbs up

brett p July 3, 2011 at 9:35 pm

You need to target the image using CSS as such:

td { background-image: url(type the location to the picture you downloaded here); }

Rather than using the body { data: data; } in the example, use the td tag.

DeaDeye July 3, 2011 at 9:35 pm

I’m not exactly sure of your purpose, but CSS usually works fine. Just create a CSS class, such as;
<style type="text/css">
table.bgimage {
background-image: url("path/to/image.png");
and in your code, where you would have the <table> tag, just add the class to it, such as;
<table class="bgimage"> … </table>

Hope this is helpful!

Previous post:

Next post: