Background-image Does Not Work Locally Or With External Link

September 29, 2023 Post a Comment

I am trying to create a background image for a project, and even when I use the Photobucket link(http://i1339.photobucket.com/albums/o714/garlandjon95/MovingMountains_zps5s3fqnf0.p

Solution 1:

You need to define the height or add content to the div. Try adding the background to the body and see the effect you get. Or add:

div{
   height:300px;
   width:300px;
   background-image: url("http://i1339.photobucket.com/albums/o714/garlandjon95/MovingMountains_zps5s3fqnf0.png");
}

Solution 2:

You are not seeing background image because the div to which you added the background image is empty. You need to either add some content to it or define its height and width.

You can check the snippet.

div {
  background-image: url("http://i1339.photobucket.com/albums/o714/garlandjon95/MovingMountains_zps5s3fqnf0.png");
  height: 590px;
  width: 100%;
}

<h1>On The Fly Web Design</h1><p>Your needs on the fly</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><div></div>

Solution 3:

You need to add width and height to div.

div{
width:100%;
height:400px;
background-image:url("http://i1339.photobucket.com/albums/o714/garlandjon95/MovingMountains_zps5s3fqnf0.png");
}

<body><h1>On The Fly Web Design</h1><p>Your needs on the fly</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><div></div></body>

Solution 4:

It might be because this div has no content inside, therefore the height is 0px and the background image will not show up. Try moving the div tags around the rest of your content, and also give it a class name which will help later on when you have multiple divs:

<body><divclass="page-content"><h1>On The Fly Web Design</h1><p>Your needs on the fly</p>

  ...

 </div></body>

and then your css:

.page-content { 
  background-image: url("..."); 
}

Solution 5:

Above explanation will work fine,if not kindly add few background property like background-size,background-position,repeat etc and also must add height

Html5 Guide