Mike
Mike

Reputation: 39

Moving an image

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><a href="(*link*)">(*title*)</a></h1>
			<h2>(*short_description*)</h2>
		</div>
		<div class="head-left">
			<box:menu>
				<ul>
					<view:menu>
						<li class="(*menu_item_selected*)">
							<a href="(*menu_item_link*)">(*menu_item_title*)</a>
						</li>
					</view:menu>
				</ul>
			</box:menu>
		</div>
	</div>
</div>

Upvotes: 1

Views: 37

Answers (1)

Sam Apostel
Sam Apostel

Reputation: 603

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>

Upvotes: 1

Related Questions