Search code examples
cssimageexternal

Image not loading with CSS

Ive referenced several different stack overflow questions, and tried solutions that seem similar to mine and I cant seem to find the answer. Why is the image not loading?

ive tried using these in both a class tag and the body tag. Ive tried backwards and forwards slashes. Ive tried clearing my cache. Ive tried adding additional rules for height width and contain. All to no avail. Ive tried local and pixabay urls as well. background-image: image('../img/eye.jpg'); background-image: url("img/eye.jpg");

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles\styles.css">
  </head>
  <body>
    <div class="wrapper">
      <h1>Front Page</h1>      
    </div>    
  </body>
</html>


* {
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 0 auto;
  width: 1000px;
}

.img-eye {
  background-image: url("https://pixabay.com/photos/dog-bathing-sea-waves-portrait-4565646/");
  background-size: 100%;
  height: 200px;
  width: 300px;
}

body {
  background-image: image('../img/eye.jpg');
  background-color: #000;
}

No error messages nothing. Damned thing is dead pan. Code also on js fiddle. https://jsfiddle.net/greenthingsjump/htq4os9c/1/

Solution

  • You need to reference the image url with a picture extension (jpg, png, svg). You are referencing a page with an embedded image. Try changing the body style to include this url:

    https://cdn.pixabay.com/photo/2019/10/21/10/04/dog-4565646_1280.jpg

    You also aren't using your img-eye class, in case you were unaware.