Q:

HTML and CSS: Text moving with background image (unable to move text)

I'm coding a website which consists of some HTML and CSS.  I'm in the middle of programming it when I come across a problem.  When I try and move my text up, the background image moves with it, so I'm unable to get the text overlayedon the background image. 
My website looks like this:
I want the 'RESPITORY SYSTEM' part over the image

Here's my code:

<! doctype html>
<html lang=''>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>Respitory System</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>Products</a></li>
   <li><a href='#'>Company</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</body>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-position: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 250%;
}
.caption {
  position: absolute;
  left: 0%;
  top: 100%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 20px;
  font-size: 25px;
  letter-spacing: 20px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
</style>
</head>

<style>

body, html {
    height: 100%;
    margin: 0;
}
</style>
</head>
<body>
<div class="bg"></div>

</style>
</head>
<style>

.bg {
    /* The image used */
    background: url('https://i.pinimg.com/originals/68/5e/18/685e18ff8147427079a14ce27d984688.jpg');

    /* Full height */
     height:450px;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: repeat-x;  
    background-size: cover;
}

</style>

<div id="backimage">
<br>
<body background=backimage>
</div>
<div class="bgimg-1">
  <div class="caption">

<div class="w3-container w3-center w3-animate-top">
    <span class="border">RESPITORY SYSTEM</span>
  </div>
</div>
<html>

And my styles.css:

@import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: ".";  display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu { width: auto; border-bottom: 3px solid #47c9af; font-family: Raleway, sans-serif; line-height: 0; } #cssmenu ul { background: #ffffff; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu.align-right > ul > li > a { margin-right: 0; margin-left: -4px; } #cssmenu > ul > li > a { z-index: 2; padding: 18px 25px 12px 25px; font-size: 15px; font-weight: 400; text-decoration: none; color: #444444; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; margin-right: -4px; } #cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { color: #ffffff; } #cssmenu > ul > li > a:after { position: absolute; left: 0; bottom: 0; right: 0; z-index: -1; width: 100%; height: 120%; border-top-left-radius: 8px; border-top-right-radius: 8px; content: ""; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; -webkit-transform: perspective(5px) rotateX(2deg); -webkit-transform-origin: bottom; -moz-transform: perspective(5px) rotateX(2deg); -moz-transform-origin: bottom; transform: perspective(5px) rotateX(2deg); transform-origin: bottom; } #cssmenu > ul > li.active > a:after, #cssmenu > ul > li:hover > a:after, #cssmenu > ul > li > a:hover:after { background: #47c9af; }

(My apologies the code isn't going vertically down)
If you need anymore information just ask. 
Edit: Changed title from 'CSS' to 'HTML and CSS'. 

A:

You have two options to deal with this situation:
1- Use absolute position with responsive measurements (vh - vw, vmin - vmax). 
example:

h1.title{
  position: absolute;
  left: 20vw;
  top:25vh;
}
<div class="content">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTPGf2xetXnwKbT-8mWJWQHGpJyRHUL0Icn9HbfwB_4DNcLPzX">
<h1 class="title">Hello</h1>
</div>

2- Use background image instead of using image as a block, and then center the text:

.content{
  width: 100%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTPGf2xetXnwKbT-8mWJWQHGpJyRHUL0Icn9HbfwB_4DNcLPzX');
}
h1.title{
  text-align: center;
  padding-top: 30vh;
}
<div class="content">
<h1 class="title">Hello</h1>
</div>

