over ride default background

Question

I'm forced to use bootstrap layout for this project (univ.). I can't seem to get the gradient to show through, the col. keeps adopting a default white.

 /* fonts available in this website: "Black Ops One/Caveat Brush/Ceviche One/Cookie/Courgette/Homemade Apple/Kalam/Kaushan Script/Norican/Satisfy*/ /* Extra small devices (phones up to 480px) */ /* No media query since this is the default in Bootstrap */ @media only screen and (min-width: 320px) and (max-width: 575px) { .pageWrapper { background-color: blue; width: 100%; height: auto; } } @media only screen and (min-width: 576) and (max-width: 768xp) {} @media only screen and (min-width: 768) and (max-width: 992px) {} /* Adding above this line will effect all views */ /* Small devices (tablets, 768px and up) */ @media only screen and (min-width: 993) and (max-width: 1139px) { .pageWrapper { background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03); width: 100%; height: auto; } .col-xl-bg2 { background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03); } header { width: 100%; margin: auto; background-color: #ddd8af; display: inline-block; } .topHeadboxleft { float: left; width: 59%; text-align: center; margin-left: 1%; } .logoImage { float: left; display: inline-block; background-image: url("../images/logoBobs.jpg"); background-repeat: no-repeat; width: 170px; height: 170px; } .businessBox { float: left; } .busName { float: left; margin-top: 20px; padding: 2px 2px 2px 2px; } #nameBox { float: left; font-family: "Great Vibes"; font-size: 5em; font-weight: 800; color: #544e1f; text-shadow: -2px 0 #aa830b, 0 2px #aa830b, 2px 0 #aa830b, 0 -2px #aa830b; } #businessName { font-family: "Shrikhand", cursive; font-size: 3em; font-weight: 400; text-shadow: .5em; color: #aa830b; text-shadow: -2px 0 #544e1f, 0 2px #544e1f, 2px 0 #544e1f, 0 -2px #544e1f; } .topHeadboxright { width: 48%; height: auto; float: right; vertical-align: middle; margin-top: 1.5%; } .contactBox { width: 100%; height: auto; float: right; margin-right: 1%; } #contactDetail { font-family: "Indie Flower", cursive; font-size: 1.5em; text-align: right; color: #025900; text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b; padding: 5px 5px 5px 5px; } #contactPhone { font-family: "Anton", cursive; font-size: 4em; font-weight: 800; color: #025900; text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b; text-align: right; padding: 5px 5px 5px 5px; } #eName { font-family: "Indie Flower", cursive; font-size: 2em; font-weight: 800; color: #025900; text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b; padding: 5px 5px 5px 5px; } .subTitle { text-align: right; } a { color: #025900; text-decoration-line: none; } .container { width: 100%; } .col-xl-9 { padding-top: 25px; } .breadcrumb { padding: 2px 2px 2px 2px; background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03); } #breadcrumb { display: inline-block; background-image: inherit; } #navigation_links { padding-top: 5px; color: #b5a356; } #navigation_links>ul, li { list-style-type: none; float: left; margin-left: 15px; margin-right: 15px; color: #b5a356; background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03); } li a { color: #e0d298; font-famiLy: 'Indie Flower', cursive; font-size: 1.5em; text-decoration-line: none; } .vertical-menu { width: 200px; } .upperMenuitem { padding: .3em .3em .3em .3em; } i, .imageIcon { margin-top: .3em; float: left; margin-right: .4em; } .vertical-menu a { display: block; background-color: #eee; color: black; text-decoration: none; float: left; } li .menuItem { margin-top: .3em; } .vertical-menu a:hover { background-color: #ccc; } .vertical-menu a.active { background-image: inherit; color: #b5a356; width: 200px; height: auto; } footer { text-align: center; padding: 5px 5px 5px 5px; } .footInfo { text-align: center; padding: 5px 5px 5px 5px; } /*.myBox{ width: 1000px; height: 800px; /* the size doesn't really matter bootstrap img class="responsive" used */ a:hover { text-decoration-line: none; text-decoration-color: #aa830b; } } /* @ extra Large displays (desktops, 1140px and up) */ @media only screen and (min-width: 1140px) { body { background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03); width: 100%; height: auto; margin: auto; } .col-xl { background-color: inherit; margin: auto; } header { width: 100%; margin: auto; display: inline-block; } .topHeadboxleft { float: left; width: 59%; text-align: center; margin-left: 1%; } .logoImage { float: left; display: inline-block; background-image: url("../images/logoBobs.jpg"); background-repeat: no-repeat; width: 170px; height: 170px; } .businessBox { float: left; } .busName { float: left; margin-top: 1.5em; } #nameBox { float: left; font-family: "Great Vibes"; font-size: 5em; font-weight: 800; color: #544e1f; text-shadow: -2px 0 #aa830b, 0 2px #aa830b, 2px 0 #aa830b, 0 -2px #aa830b; } #businessName { font-family: "Shrikhand", cursive; font-size: 3em; font-weight: 400; text-shadow: .5em; color: #aa830b; text-shadow: -2px 0 #544e1f, 0 2px #544e1f, 2px 0 #544e1f, 0 -2px #544e1f; } .topHeadboxright { width: 39%; height: auto; float: right; vertical-align: middle; } .contactBox { width: 100%; height: auto; float: right; margin-right: 1%; } #contactDetail { font-family: "Indie Flower", cursive; font-size: 1.5em; text-align: right; color: #025900; text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b; padding: 5px 5px 5px 5px; } #contactPhone { font-family: "Anton", cursive; font-size: 4em; font-weight: 800; color: #025900; text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b; text-align: right; padding: 5px 5px 5px 5px; } #eName { font-family: "Indie Flower", cursive; font-size: 2em; font-weight: 800; color: #025900; text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b; padding: 5px 5px 5px 5px; } .subTitle { text-align: right; } a { color: #025900; text-decoration-line: none; } .container { width: 100%; margin-left: 0px; } .col-xl-bg1 { background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03); margin-left: 0px; } .breadcrumb { padding: 2px 2px 2px 2px; } #breadcrumb { display: inline-block; background: inherit; } #navigation_links { padding-top: 5px; color: #b5a356; } #navigation_links>ul, li { list-style-type: none; float: left; margin-right: 15px; color: #b5a356; } li a { color: #e0d298; font-famiLy: 'Indie Flower', cursive; font-size: 1.5em; text-decoration-line: none; } .vertical-menu { width: 100%; } .upperMenuitem { padding: .3em .3em .3em .3em; } i, .imageIcon { margin-top: .3em; float: left; margin-right: .4em; } .vertical-menu a { display: block; background-color: #eee; color: black; text-decoration: none; float: left; } li .menuItem { margin-top: .3em; } .vertical-menu a:hover { background-color: #ccc; } .vertical-menu a.active { background-image: inherit; color: #b5a356; width: 200px; height: auto; } imageBox { position: relative; float: right; width: 80%; height: auto; } footer { text-align: center; padding: 5px 5px 5px 5px; } .footInfo { text-align: center; padding: 5px 5px 5px 5px; color: #b5a356; } /*.myBox{ width: 1000px; height: 800px; /* the size doesn't really matter bootstrap img class="responsive" used */ a:hover { text-decoration-line: none; text-decoration-color: #aa830b; } } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="js/breadcrumbles.js"></script> <link rel="shortcut icon" href=""> <link href="https://fonts.googleapis.com/css?family=Anton|Courgette|Great+Vibes|Indie+Flower|Shrikhand" rel="stylesheet"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> <!--[if IE]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="pageWrapper"> <header> <div class="col-sm-bg2 col-md-bg2 col-lg-bg2 col-xl-bg2"> <div class="logoImage"></div> <div class="col-xl-3"> <div class="busName"> <div id="nameBox">Bob Summers'</div> <div id="businessName">Lanndscaping Limited</div> </div> </div> </div> <div class="col-sm col-md col-lg col-xl"> <div class="col-xl-3"> <div id="contactDetail">5002 EverGreen Way, Pine City, ON T8N 9Z1</div> <div id="contactPhone">(899) 867-5309</div> <div id="eName"> <a href="contactUs.html"> <p class="subTitle">Send Us A Message / Get A Quote</p> </a> </div> </div> </div> </header> <div class="container"> <div class="col-sm col-md col-lg col-xl"> <div class="breadcrumb"> <div id="breadcrumb"> <ul id="navigation_links"> <li><a href="page1.html">Home</a></li> <li><a href="page1.html">Page 1</a></li> <li><a href="page2.html">Page 2</a></li> <li><a href="page3.html">Page 3</a></li> <li><a href="page4.html">Page 4</a></li> </ul> </div> </div> <!-- </div> --> <div class="col-sm-3 col-md-3 col-lg-3 col-xl-3"> <div class="vertical-menu"> <ul class="topMenulevel"> <li class="upperMenuitem"><a href="#" class="active"><i class="glyphicon glyphicon-home"></i><p class="menuItem">Home</p></a></li> <li class="upperMenuitem"><a href="#" class="active"><i class="glyphicon glyphicon-info-sign"></i><p class="menuItem">About Us</p></a></li> <li class="upperMenuitem"><a href="#" class="active"><i class="glyphicon glyphicon-edit"></i><p class="menuItem">OutDoor Design</p></a></li> <li class="upperMenuitem"><a href="#" class="active"><i class="glyphicon glyphicon-tint"></i><p class="menuItem">Water Flow</p></a></li> <li class="upperMenuitem"> <a href="#" class="active"> <p class="menuItem"><i class="glyphicon glyphicon-exclamation-sign"></i>Insects and Pests</p> </a> </li> <li class="upperMenuitem"> <a href="#" class="active"> <p class="menuItem"><i class="glyphicon glyphicon-leaf"></i>Lawn Maintenance</p> </a> </li> <li class="upperMenuitem"> <a href="#" class="active"> <p class="menuItem"><i class="glyphicon glyphicon-tree-deciduous"></i>Spring and Fall</p> </a> </li> <li class="upperMenuitem"> <a href="#" class="active"> <p class="menuItem"><i class="glyphicon glyphicon-asterisk"></i>White Out</p> </a> </li> <li class="upperMenuitem"> <a href="#" class="active"> <p class="menuItem"><i class="glyphicon glyphicon-tree-conifer"></i>Products</p> </a> </li> <li class="upperMenuitem"> <a href="#" class="active"> <p class="menuItem"><i class="glyphicon glyphicon-envelope"></i>Contact Us</p> </a> </li> </ul> </div> </div> <div class="col-sm-9 col-md-9 col-lg-9 col-xl-9"> <!-- <div class="myBox">image replacement box --> <div class="imageBox"> <img src="./images/boblandscaperv2.png" class="img-responsive" alt="Information Image"> </div> </div> <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12bg1"> <footer> <div class="candc"> <p class="footInfo">&#x24B8; M2D2.io - Web Design House</p> </div> </footer> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> 

Answer 1

Your media queries are not formatted correctly. the width values must include the units ( px in this case) to work correctly. Change the following

@media only screen and (min-width: 993) and (max-width: 1139px) {

to

@media only screen and (min-width: 993px) and (max-width: 1139px) {

You will also have to update some of the other ones and correct similar issues including max-width: 768xp , which incorrectly uses xp .