CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
James Has A Last Name
James Has A Last Name

Reputation: 31

Bootstrap Background Image

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.

Upvotes: 2

Views: 1174

Answers (6)

Hunter
Hunter

Reputation: 3362

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;
    }

Upvotes: 1

vanburen
vanburen

Reputation: 21663

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" />

Upvotes: 1

plushyObject
plushyObject

Reputation: 1131

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;
}

Upvotes: 3

Tony Hall
Tony Hall

Reputation: 13

Check again with this code:

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

Upvotes: 1

plushyObject
plushyObject

Reputation: 1131

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

Upvotes: 1

Chris Halcrow
Chris Halcrow

Reputation: 32010

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

Upvotes: 1

Related Questions