How to show an image in <div

Hi,

After I tried to show the picture in my website, i used :

<div style="background-image: url(389c.jpg); class="imagebox">
<div style="background-image: url(~/App_Data/389c.jpg); class="imagebox">
<div style="background-image: url(site/wwwroot/389c.jpg); class="imagebox">

There are still no working to show the picture.

Could you give me an answer how to show the picture for my website hosting in gear.host ?

Thank you for your reply…

Cheers,

Handy

Google is your friend.

<div class="someclass"><img src="linktoyourimage.png" alt="" title="" /></div>

If you want the image actually on the div you will need to use CSS

Sorry, I didn’t show the source which I used… and now, I edit my post, please view it, thanks

So you’re using CSS to add the image. Any reason why you’re doing it inline?

Anyway. Do you have the site live that I can see and the location of the image? That would help a lot

Yes, I am using CSS. My point is how to “link to my picture” as you note

because all the pictures has uploaded/published to ftp.gear.host, in my mind that the picture must be at folder App_Data, so I tried nothing to show that picture for this source code :

<div style="background-image: url(389c.jpg); class="imagebox">
<div style="background-image: url(~/App_Data/389c.jpg); class="imagebox">
<div style="background-image: url(site/wwwroot/389c.jpg); class="imagebox">

I would first recommend adding your images to a specific folder. I use assets/images/ personally, and they I also have folders for CSS/Sass, JS and downloads.

for example I use a span to add a flag and name on one site…

<span class="flag en">English</span>

I then set the CSS to show the flag. This bit sets up the span.

  .country-selector span {
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 0 0 .6rem;
    color: white;
    padding: 5px 15px 5px 50px;
    background-position: 10px 6px; }

I then set the image using the .en class

.en {
background-image: url("/assets/images/flags/flag_en.png"); }

Something similar would work for you too.

Still not working Sir, :sob:

whats your URL? so i can take a look at the code for you

The App_Data folder is a special folder reserved for data such as database files and so on, and will NOT render out any contents on the web. This is by design, and intentional and cannot be changed (as far as I know).

As mentioned in recent my message I would personally add the assets to a folder in the root using either (i personally prefer the later)…

  • /images
  • or /assets/images

I posted this here too to help others who may have the same issue.

try to use @server.mappath

is that image get server,try to change file path or reload again.