My image isnt resizing on my responsive webpage

Question

I am currently creating a responsive webpage but my background image isnt changing its height when i switch from mobile to desktop. i cant spot the issue and would appreciate some help. sorry i couldnt get the images onto here first time using stackoverflow. Thanks.

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-t-1 {width: 8.33%;}
    .col-t-2 {width: 16.66%;}
    .col-t-3 {width: 25%;}
    .col-t-4 {width: 33.33%;}
    .col-t-5 {width: 41.66%;}
    .col-t-6 {width: 50%;}
    .col-t-7 {width: 58.33%;}
    .col-t-8 {width: 66.66%;}
    .col-t-9 {width: 75%;}
    .col-t-10 {width: 83.33%;}
    .col-t-11 {width: 91.66%;}
    .col-t-12 {width: 100%;}
    .backgroundimg {
        background-image: url(images/group.jpg);
        color: deepskyblue;
        text-shadow: 1.5px 1.5px 1.5px deepskyblue;
    }
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .dimensions{
        height: 800px;
        color: deepskyblue;
        text-shadow: 1.5px 1.5px 1.5px deepskyblue;
    }

}

/* For mobile phones: */
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

.right{
    float: right;
}
.left{
    float: left;
}


body {
  margin: 0;
  padding: 0;
  
  /* make it look decent enough */
  background: #232323;
  color: #cdcdcd;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

a {
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

a:hover {
  color: tomato;
}

#menuToggle {
  display: block;
  position: relative;
  top: 25px;
  left: 10px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input{
  display: block;
  width: 50px;
  height: 42px;
  position: absolute;
  top: 5px;
  left: 5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span{
  display: block;
  width: 40px;
  height: 6px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2){
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3){
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2){
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  height: 100vh;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul{
  transform: scale(1.0, 1.0);
  opacity: 1;
}
.sans{
    font-family: 'Josefin Sans', sans-serif;
}
.slab{
    font-family: 'Josefin Slab', serif;   
}
.flower{
    font-family: 'Indie Flower', cursive;
}
.lobster{
    font-family: 'Lobster', cursive;
}
.comfortaa{
    font-family: 'Comfortaa', cursive;
}
.marker{
    font-family: 'Permanent Marker', cursive;
}
.actor{
    font-family: 'Actor', sans-serif;
}
.scada{
    font-family: 'Scada', sans-serif;
}

.container {
    width: 100%;
    height: 110px;
    background-color:darkslateblue;
}

.align {
    text-align: justify;
}

p2 {
    margin-right: 2%;
}

p {
    text-align: center;
    font-size: 180%;
    height: 200px
}

.backgroundimg {
    background-image:url(images/group.jpg);
    background-position: center;
    background-size:cover;
}
.dimensions{
    height: 300px;
    color: deepskyblue;
    text-shadow: 1.5px 1.5px 1.5px deepskyblue;
}

<!doctype html>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="script.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Actor|Comfortaa|Indie+Flower|Lobster|Permanent+Marker|Scada:700i|Josefin+Sans|Josefin+Slab" rel="stylesheet">
</head>

<body>
    <div class="container">                 
      <div id="menuToggle" class=" col-m-1">
        <input type="checkbox" />
        <span></span>
        <span></span>
        <span></span>
        <ul id="menu" class="sans">
          <a href="index.html"><li>Home</li></a>
          <a href="Itinerary.html"><li>Itenery</li></a>
          <a href="contact.html"><li>Contact</li></a>
        </ul>
        </div>
        <div class="col-m-1">
            <img src="images/nasalogo.png">
        </div>
        <div class = "col-8 col-m-8 comfortaa">
            <h1>2018 NASA Trip</h1>
        </div>
    </div>
    <div class="col-12 align marker backgroundimg dimensions">
        <p>If you had one chance would you capture it?</p>
    </div>
    <div class="col-12 align sans">
        <p2>The 2018 NASA trip aims to give students who are interested in science a once in a lifetime oppotunity, the chance to get a close look at the worlds leading space agency.The 2018 NASA trip aims to give students who are interested in science a once in a lifetime oppotunity, the chance to get a close look at the worlds leading space agency.The 2018 NASA trip aims to give students who are interested in science a once in a lifetime oppotunity, the chance to get a close look at the worlds leading space agency.The 2018 NASA trip aims to give students who are interested in science a once in a lifetime oppotunity, the chance to get a close look at the worlds leading space agency.The 2018 NASA trip aims to give students who are interested in science a once in a lifetime oppotunity, the chance to get a close look at the worlds leading space agency.The 2018 NASA trip aims to give students who are interested in science a once in a lifetime oppotunity, the chance to get a close look at the worlds leading space agency.</p2>
    </div>

Answer 1

To alter background dimensions use,

  background-size: 768px 800px. 

though I prefer % to px. If u want to cover your background with a image you can try

     background:url('your path') no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;

Answer 2

<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 divimage "></div>

try adding all the classes in the code and make div tag (above name as divimage ) give its properties expect height and width & others you want to give like border and all

2nd reason can be @media query should be at the other end of the css properties you have written. reason for this to write at the end is :- css reads from top to bottom.everything that is below some other css will overwrite whats top of it. examlple:if your @media query is on the top then the CSS classes written below media query will overwrite all your styles implemented in css sheet

Answer 3

Media query should be at the end of the css.

Reason for why it should be at the end.

CSS reads from top to bottom. Everything that is below some other css will overwrite what's on top of it, i.e the rule that is set last, is the one that will be executed.

So, if your @media query are on the top then the css classes written below of media query will overwrite all the styles.