Why my image not displayed in my domain(I use directAdmin)?

Question

I transferred my website code to my domain, but I don't know why my picture doesn't show on the right side. I placed my image beside index.html, so I used relative addressing:

On my directAdmin:

index.html:

Note to .right: background-image: url("IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png");:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Arman Ebrahimi</title>
    <style>
      *{
    box-sizing: border-box;
}
body{
    background-image: linear-gradient(to right, #333, #ccc);
    margin: 0;
    padding: 40px 60px 0 60px;
    height: 100vh;
}
.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.left{
    width: 70%;
    height: 80%;
    background-color: gold;
    position: relative;
    border-radius: 10px 0 0 0;
    color: #333;
}
.country{
    margin-left: 40px;
}
h1{
    font-size: 50px;
    font-family: "Times New Roman";
    letter-spacing: 3px;
}
.description{
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.right{
    background-image: url("IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 150%;
    width: 30%;
    height: 80%;
    background-color: #555;
    position: relative;
    border-radius: 0 10px 0 0;
}
.menu{
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 10px;
}
.menu > a{
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: white;
    transition: 0.5s;
    border-radius: 10px;
}
.menu > a:hover{
    background-color: gold;
}
.dropdown{
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
    transition: 0.5s;
}
.dropdown:hover{
    background-color: gold;
}
.dropbtn{
    background-color: inherit;
    border: none;
    color: white;
    font-size: inherit;
}
.dropdown-content{
    background-color: #eee;
    visibility: hidden;
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
}
.dropdown-content a{
    display: block;
    width: 100%;
    font-size: 14px;
    color: #222;
    padding: 10px 40px 10px 10px;
    text-decoration: none;
}
.dropdown-content a:hover{
    background-color: gold;
}
.dropdown:hover .dropdown-content{
    visibility: visible;
}
.footer{
    width: 100%;
    height: 15%;
    background-color: #222;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.footer a{
    display: inline-block;
    text-decoration: none;
    color: white;
}
.footer a:hover{
    color: gold;
}
.footer2{
    width: 100%;
    height: 5%;
    background-color: gold;
}
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        <p class="country">Iran</p>
        <div class="description">
            <h1>ARMAN <br> EBRAHIMI</h1>
            <p>//about me <br><br>I'm a Front-end(Reactjs) developer.
                <br><br>I'm looking for a remote job. I'm from Iran-Birjand.</p>
        </div>
    </div>
    <div class="right">
        <div class="menu">
            <a href="#">About</a>
            <a href="#">Blog</a>
            <div class="dropdown">
                <button class="dropbtn">Resources
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="#">project1</a>
                    <a href="#">project2</a>
                    <a href="#">project3</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Features
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="#">Skills</a>
                    <a href="#">Favorites</a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <a href="#">Instagram</a>
        <a href="#">Google</a>
        <a href="#">Linkedin</a>
        <a href="https://github.com/ar18313731">Git</a>
    </div>
    <div class="footer2"></div>
</div>
</body>
</html>

This is my domain:

http://armaneebrahimi.ir/

When I use absolute addressing, the result is:

Have you tried linking with the actual URL of the image: `https://armaneebrahimi.ir/IMG_%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B4%DB%B0%DB%B2_%DB%B1%DB%B2%DB%B2%DB%B2%DB%B3%DB%B0.png`? — Stephen Ostermiller, Apr 19 '22 at 00:03
@StephenOstermiller Yes. In this case, shows "image not found". but, it works fine, when I open that(locally) in my browser. — Arman Ebrahimi, Apr 19 '22 at 17:26

score 1 · Accepted Answer · answered Apr 19 '22 at 17:47

1

It works for me when I use the full URL:

.right{
    width:300px;
    height:300px;    
    background-image: url("https://armaneebrahimi.ir/IMG_%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B4%DB%B0%DB%B2_%DB%B1%DB%B2%DB%B2%DB%B2%DB%B3%DB%B0.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 150%;
    background-color: #555;
    position: relative;
    border-radius: 0 10px 0 0;
}

 <div class="right"></div>

answered Apr 19 '22 at 17:47

Stephen Ostermiller

23,933
14
88
109

Yes. Thanks. but for me works, too. Only it has a problem with my domain. – Arman Ebrahimi Apr 19 '22 at 17:49
You just need to change your site to use the full URL like that. – Stephen Ostermiller Apr 19 '22 at 17:52
Very thanks, Stephen. what are the changes? can you guide me? – Arman Ebrahimi Apr 19 '22 at 18:02
1

Change `IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png` to `IMG_%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B4%DB%B0%DB%B2_%DB%B1%DB%B2%DB%B2%DB%B2%DB%B3%DB%B0.png` – Stephen Ostermiller Apr 19 '22 at 18:09
Excellent:) It works. thanks. How to you produced this URL? was the problem with the uploader site? – Arman Ebrahimi Apr 19 '22 at 18:14
International characters in URLs need to be encoded. Browsers tend to show international characters in the URL bar, but actually send the encoded version. If you copy and paste a URL out of the URL bar, it will typically be encoded. You can paste `https://armaneebrahimi.ir/IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png` into the URL bar in chrome or firefox and hit enter to load the URL. Then when you copy it back out it will be `https://armaneebrahimi.ir/IMG_%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B4%DB%B0%DB%B2_%DB%B1%DB%B2%DB%B2%DB%B2%DB%B3%DB%B0.png` – Stephen Ostermiller Apr 19 '22 at 18:18
So, the Should be image to placed beside `index.html`, to load this URL`(https://armaneebrahimi.ir/IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png)` in browser? Then I should copy this URL for encoding, right? – Arman Ebrahimi Apr 19 '22 at 18:32
The CSS won't load the image if it has `۲۰۲۲۰۴۰۲_۱۲۲۲۳` in the URL. You should get the encoded version of the image to put into your CSS. – Stephen Ostermiller Apr 19 '22 at 19:01

Why my image not displayed in my domain(I use directAdmin)?

1 Answers1