I am having trouble displaying a background image in CSS. Additionally, I am unable to set a background color for a div.
#mlogo {
background-image: url(/mobileimages/2015LOGOFB.jpg);
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
position: relative;
width:100%;
text-align:center;
}
#mwrap {
background-color: black;
position: relative;
width:100%;
text-align:center;
overflow:hidden
}
#mindex {
background-color:black;
position: relative;
width:100%;
text-align:center;
border-style: solid;
border-width: 1px;
border-color: #a1a1a1;
}
The browser seems to be recognizing the CSS, as some of the elements are displaying correctly. These are the specific divs I am trying to work with.
<div id="mwrap">
<div id="mlogo" align="center">
</div>
<div id="mindex" align="center">
<p id="menu1">Photo And Video</p>
</div>
<div id="mindex" align="center">
<p id="menu1">Scores</p>
</div>
<div id="mindex" align="center">
<p id="menu1">Standings</p>
</div>
</div>
I am developing a separate mobile site for an existing desktop site. Thus far, I have tested my code on an Android (Galaxy 4) and iPhone 6, and both displays appear identical.
I cannot figure out why the image is not showing as the background of the div, nor can I understand why I am unable to set the background color of the entire site to black. The image does display if I use <img src""> in the HTML, but not when I add it to the CSS of the div box I am using to define different sections of the site.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mobilesummer.css">
<title>SSL 2015</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
</head>
This is the contents of my head tag.
I am feeling lost on this issue...am I making something simple more complex than it needs to be?