Moving an image - html

Question

I want to move an image downward . but i cant when i use top or bottom the image moves right or left .
(i dont know how but i managed to make it like a layer mask in photoshop!)
i used margin , padding , top , bottom etc but none of them worked
here is my code
.header {
height: 200px;
background: #313b3d url(https://preview.ibb.co/mFmpK5/grotti_canyon_wallpaper_1366x768.jpg)no-repeat 160px top;
}
.head-right a {
color: #fff;
}
.head-right a:hover {
color: #fff;
}
.head-right h1 {
position: relative;
margin-bottom: 17px;
padding-top: 40px;
font-size: 28px;
text-align: center;
background: url() no-repeat center top;
}
<div class="header">
<div class="head-wrp">
<div class="head-right">
<h1>(*title*)</h1>
<h2>(*short_description*)</h2>
</div>
<div class="head-left">
<box:menu>
<ul>
<view:menu>
<li class="(*menu_item_selected*)">
(*menu_item_title*)
</li>
</view:menu>
</ul>
</box:menu>
</div>
</div>
</div>

Answer 1

that's because you are using the background property to define the image, then you'll have to use css background-position
.header {
height: 200px;
background: #313b3d url(https://preview.ibb.co/mFmpK5/grotti_canyon_wallpaper_1366x768.jpg)no-repeat;
background-position: 0 50px;
}
.head-right a {
color: #fff;
}
.head-right a:hover {
color: #fff;
}
.head-right h1 {
position: relative;
margin-bottom: 17px;
padding-top: 40px;
font-size: 28px;
text-align: center;
background: url() no-repeat center top;
}
<div class="header">
<div class="head-wrp">
<div class="head-right">
<h1><a >(*title*)</a></h1>
<h2>(*short_description*)</h2>
</div>
<div class="head-left">
<box:menu>
<ul>
<view:menu>
<li class="(*menu_item_selected*)">
<a >(*menu_item_title*)</a>
</li>
</view:menu>
</ul>
</box:menu>
</div>
</div>
</div>