html – Bootstrap Background Image-ThrowExceptions

Exception or error:

Okay so basically it will not display my background image. I have looked at all the other posts and none of them work. Here is the code.

Here is the Html. Note that the app.css and app.js are just bootstrap files renamed.

<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width-device-width, initial-scale=1" />
		<!-- Above is Important -->
		<meta name="description" content="HTML, CSS, BOOTSTRAP" />
		<meta name="author" content="James Mehltretter" />
		<title>Download Free HTML Templates</title>
		<link rel="stylsheet" href="app.css" type="text/css" />
		<script src="app.js" type="text/javascript"></script>
	</head>
	<body>
		
	</body>
</html>

Here is the part of the CSS that I edited.

body {
  margin: 0;
 background-image: url(background.png);

}

The JavaScript file is just generic bootstrap. Here is the link to the file I am actually using though.

The Bootstrap JS

Thank you.

How to solve:

Your Body has no height and there’s nothing in it to put a background on.

Make sure your body has some height to it.

body {
  margin: 0;
  background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
  background-size: 1440px 800px;
  height: 300px;
}

###

Check that the image background.jpg exists within the parent directory of the directory that contains the css you’ve provided.

###

Are you getting a 404 error on the file path in your javascript console? Also ditch the quotes. Don’t think that’s right. I think w3Schools is wrong. Here is Mozilla docs showing no quotes on URL:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

###

Check again with this code:

    body {
  margin: 0;
 background-image: url(../background.jpg);
 background-size: 1440px 800px;
}

###

If you’re trying to make the image cover the entire screen all the time use HTML or HTML and BODY together.

See working Snippet at Full page.

html,
body {
  height: 100%;
  width: 100%;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d4/Tokyo_by_night_2011.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

###

As long as you have given the height, the image will show.
In this example, height: 100vh, which means it covers the whole screen.

body{
        background-image: url('https://image.freepik.com/fotos-kostenlos/gruene-wiese-hintergrund_1252-1098.jpg');
        height: 100vh;
    }

The best practice however is to set it to cover and no-repeat, so that the background image is shown only once despite the screen size.

    body{
    	background-image: url('https://image.freepik.com/fotos-kostenlos/gruene-wiese-hintergrund_1252-1098.jpg');
    	background-size: cover;
    	background-repeat: no-repeat;
    	height: 100vh;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *