Paris Paris - 10 days ago 5
CSS Question

Bootstrap-Image not showing using custom css

I am having trouble displaying my backround image using imgur for the location of my image. I have tried adding a class to override bootstrap and I have tried !important, but its still not working. The interesting thing is when i only use background:black, the color will come up, however when I tried to place an image it does not work.

Below is my code. PS - I'm new to this.

CSS Code:
header.myheader{
height: 600px;
background:url("http://imgur.com/HAst0aY")!important;
}

nav.mynavbar,a:hoover {
float:left;
display: inline-block;
margin-left: 20px;
font-weight: 200;
color:rgba(255,255,255,0.7);
font-size: 20px;
text-transform: capitalize;

}


html code:
<!DOCTYPE html>

<html=lang ="en-US" >

<head>

<meta charset="utf-8">
<title> MSMAlliance</title>

<!-- SEO -->

<meta name = "author" content="msmalliance">
<meta name="description" content="">
<link rel="canonical" href="">

<meta name="viewport" content=" width = device-width,inital-scale = 1.0">
<link rel ="stylesheet" href="css/bootstrap.css">
<link rel ="stylesheet" href="css/bootstrap-theme.css">
<link rel ="stylesheet" href="css/customheader.css">

<link rel = "icon" href="#" type="image/x-icon" sizes=" 16x16">


<link href="https://fonts.googleapis.com/cssfamily=Open+Sans:400,600i,700i" rel="stylesheet">




<body>
<header class ="myheader">
<nav class ="mynavbar">
<a href="#" class = "homepage"> MSMAlliance Group</a>
<a href="#" class = "About" > About </a>
<a href="#" class = "Meetus">Meet Us</a>
<a href="#" class ="events"> Event </a>
<a href ="#" class = "contactus"> Contact Us</a>
<a href="" target="_blank" > Excutive Log In / Sign Up </a>
</nav>

<h1> Welcome to Morehouse School of Medience - Alliance Group </h1>


</header>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
<script src="js/bootstrap.js"> </script>



Answer

you are trying to place html page as background which wont work

instead try to place real image

header.myheader{
  height: 600px;
  background:url("http://i.imgur.com/HAst0aY.jpg");
}