CODEWITHSUNDEEP
javascripthtmlcss
user13398330
user13398330

Reputation:

I have add image but doesn't appeared

I have added an image forest but it doesn't appear on the website. In web expression 4 works fine. I have added background blue and I want to have background blue.It works fine in w3school environment,

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Why on my website image doesn't seem?

<!DOCTYPE html>
    <html>

    <head>

    <title>ME</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    </head>

    <body>

    <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
      <div class="w3-display-topleft w3-padding-large w3-xlarge">
        Logo
      </div>
      <div class="w3-display-middle">
        <h1 class="auto-style2">Me</h1>
        <hr class="w3-border-grey" style="margin:auto;width:40%">
        <p class="w3-large w3-center">Personal Informations</p>
      </div>
      <div class="w3-display-bottomleft w3-padding-large">
        Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">me</a>
      </div>
    </div>
    <p><img alt="forestbridge" height="963" src="forest%20bridge.jpg" width="1642"></p>
    </body>
    <style type="text/css">
    body {
      background-color: blue;
    }
    .auto-style1 {
        margin-right: 663px;
    }
    body,h1 {font-family: "Raleway", sans-serif}
    body, html {height: 100%}
    .bgimg {
      background-image: url('/w3images/forestbridge.jpg');
      min-height: 100%;
      background-position: center;
      background-size: cover;
    }
    .auto-style2 {
        color: #000;
        font-family: "Segoe Print";

    }
    </style>

Upvotes: 0

Views: 766

Answers (3)

alvin
alvin

Reputation: 112

You need to put full path of the image. Change the "/w3images/forestbridge.jpg" in your css .bgimg class to "https://www.w3schools.com/w3images/forestbridge.jpg" and I am not sure what is the purpose of putting <p><img alt="forestbridge" height="963" src="forest%20bridge.jpg" width="1642"></p> because it seems redundant, so try to remove it or change it to others image.

Upvotes: 0

H. Far
H. Far

Reputation: 1

change
background-image: url('/w3images/forestbridge.jpg'); to
https://www.w3schools.com/w3images/forestbridge.jpg
you should use absolute path for external resources.

Upvotes: 0

Vipul Sinha
Vipul Sinha

Reputation: 840

body {
      background-color: blue;
    }
    .auto-style1 {
        margin-right: 663px;
    }
    body,h1 {font-family: "Raleway", sans-serif}
    body, html {height: 100%}
    .bgimg {
      background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
      min-height: 100%;
      background-position: center;
      background-size: cover;
    }
    .auto-style2 {
        color: #000;
        font-family: "Segoe Print";

    }
<!DOCTYPE html>
    <html>

    <head>

    <title>ME</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    </head>

    <body>

    <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
      <div class="w3-display-topleft w3-padding-large w3-xlarge">
        Logo
      </div>
      <div class="w3-display-middle">
        <h1 class="auto-style2">Me</h1>
        <hr class="w3-border-grey" style="margin:auto;width:40%">
        <p class="w3-large w3-center">Personal Informations</p>
      </div>
      <div class="w3-display-bottomleft w3-padding-large">
        Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">me</a>
      </div>
    </div>
    </body>
    </html>

Upvotes: 1

Related Questions