Hosting An Image & Dream Host Directory


#1

Hi Everyone,

I’m very new to web development and just getting my feet wet. I’m trying to create a graph using the code below and and have an image in that graph. I’m hosting via DreamHost and building my site with Wordpress.

I’ve found the following example online for hosting an image:

Or when you have the image in your images directory like this:

I’m just wondering for both options 1 and 2, how and where do I ‘host’ this image? I’m not sure where my DreamHost directory would be that my WP site is attached to.

Any suggestions would be appreciated. Many thanks!

dl { margin: 0; padding: 0; } dt { position: relative; /* IE is dumb */ clear: both; display: block; float: left; width: 104px; height: 20px; line-height: 20px; margin-right: 17px; font-size: .75em; text-align: right; } dd { position: relative; /* IE is dumb */ display: block; float: left; width: 197px; height: 20px; margin: 0 0 15px; background: url("g_colorbar.jpg"); } * html dd { float: none; } /* IE is dumb; Quick IE hack, apply favorite filter methods for wider browser compatibility */ dd div { position: relative; background: url("g_colorbar2.jpg"); height: 20px; width: 75%; text-align:right; } dd div strong { position: absolute; right: -5px; top: -2px; display: block; background: url("g_marker.gif"); height: 24px; width: 9px; text-align: left; text-indent: -9999px; overflow: hidden; }
Love Life
25%
Education
55%
War Craft 3 Rank
75%

#2

is outdated, because you are mixing content (your ) with appearance (the background image).

Upload this to your media gallery. After you upload it, click on “edit” to the right. You will then see a link to the image in the box called “File URL”.

In your child theme stylesheet, you would then add this line of CSS:

body {background: url('path-to-image') repeat fixed;}

A brief explanation:

background: the image you are going to use; you can also specify a color

url: the address of the image you want to use as a background

repeat: repeat this image in both the x- and y-directions. If you are using a large image you only want to see once, you can delete this part

fixed: the image does not scroll as the user scrolls down the page, providing a more professional appearance