I need to center image on a div

Navigation
0

Hello, I am making changes on this website: link

When doing over an image I want it to focus on the left in the id="Header_creative" and that the centered and complete image appears

I leave the file js.: 

let imgList = document.querySelectorAll('img')
let aside = document.querySelector('#Header_creative')
for(let i = 0; i < imgList.length; i++){
  imgList[i].addEventListener('mouseover',function(){
    aside.style.backgroundImage = "url(" + this.src + ")"
    aside.clientHeight
    aside.classList.add('visible')
  })
  imgList[i].addEventListener('mouseout',function(){
    aside.classList.remove('visible')
  })
}


  })
  imgList[i].addEventListener('mouseout',function(){
aside.classList.remove('visible')
  })
}

CSS 

@media only screen and (min-width: 1240px) {

#Header_creative #Top_bar .logo { margin-left: 30px; text-align: left; }

#Header_creative #Top_bar .menu > li > a { text-align: left; }
#Top_bar .menu > li > a span:not(.description) { padding-left: 60px; }

/* 
#Header_creative { background-image: url("http://guillermomateo.es/vinosybodegas3/wp-content/uploads/2017/01/home_wine2_headerbg.png"); background-repeat: repeat-y; background-position: top left; }

*/

}
#Top_bar #logo, .header-fixed #Top_bar #logo, .header-plain #Top_bar #logo, .header-transparent #Top_bar #logo {
height: 180px;
line-height: 127px;
padding: 0px 0;
}
#Top_bar #logo img {
vertical-align: middle;
max-height: 100%;
}
#Top_bar.is-sticky #logo img:not(.svg) {
max-height: 50px;
width: auto!important;
}

HTML 

<div id="Header_creative" class="">	
<a href="#" class="creative-menu-toggle"><i class="icon-menu-fine"></i></a>

<div class="creative-social"><ul class="social"></ul></div>	
<div class="creative-wrapper">

	<!-- .header_placeholder 4sticky  -->
	<div class="header_placeholder"></div>

	<div id="Top_bar">
		<div class="one">
	
			<div class="top_bar_left">
			
				<!-- Logo -->
				<div class="logo"><a id="logo" href="http://guillermomateo.es/vinosybodegas3" title="Vinos y Bodegas"><img class="logo-main scale-with-grid" src="http://guillermomateo.es/vinosybodegas3/wp-content/uploads/2017/05/logo-nuevo-vinos-y-bodegas-400x295.png" alt="logo-nuevo-vinos-y-bodegas-400x295" /><img class="logo-sticky scale-with-grid" src="http://guillermomateo.es/vinosybodegas3/wp-content/uploads/2017/05/logo-nuevo-vinos-y-bodegas-400x295.png" alt="logo-nuevo-vinos-y-bodegas-400x295" /><img class="logo-mobile scale-with-grid" src="http://guillermomateo.es/vinosybodegas3/wp-content/uploads/2017/05/logo-nuevo-vinos-y-bodegas-400x295.png" alt="logo-nuevo-vinos-y-bodegas-400x295" /><img class="logo-mobile-sticky scale-with-grid" src="http://guillermomateo.es/vinosybodegas3/wp-content/uploads/2017/05/logo-nuevo-vinos-y-bodegas-400x295.png" alt="logo-nuevo-vinos-y-bodegas-400x295" /></a></div>			
				<div class="menu_wrapper">
					<nav id="menu" class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-103" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#"><span>BODEGA</span></a>
<ul class="sub-menu">
<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/historia/"><span>HISTORIA</span></a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/quienes-somos/"><span>QUIENES SOMOS</span></a></li>
<li id="menu-item-254" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#"><span>PROCESO</span></a>
<ul class="sub-menu">
	<li id="menu-item-255" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/elaboracion/"><span>ELABORACIÓN</span></a></li>
	<li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/crianza/"><span>CRIANZA</span></a></li>
	<li id="menu-item-268" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/envasado/"><span>ENVASADO</span></a></li>
	<li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/logistica/"><span>LOGISTICA</span></a></li>
</ul>
</li>
<li id="menu-item-277" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/calidad/"><span>CALIDAD</span></a></li>
</ul>
</li>
<li id="menu-item-401" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#"><span>VIÑA</span></a>
<ul class="sub-menu">
<li id="menu-item-413" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/vinedos/"><span>VIÑEDOS</span></a></li>
<li id="menu-item-411" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/tipos-de-uva/"><span>TIPOS DE UVA</span></a></li>
<li id="menu-item-410" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/entorno/"><span>ENTORNO</span></a></li>
</ul>
</li>
<li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-158 current_page_item"><a href="http://guillermomateo.es/vinosybodegas3/vinos/"><span>VINOS</span></a></li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/premios/"><span>PREMIOS</span></a></li>
<li id="menu-item-399" class="menu-item menu-item-type-post_type menu-item-object-page"><a><span>EXPORTACIÓN</span></a></li>
<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://guillermomateo.es/vinosybodegas3/contacto/"><span>CONTACTO</span></a></li>
</ul></nav><a class="responsive-menu-toggle " href="#"><i class="icon-menu-fine"></i></a>					
</div>		
			
<div class="search_wrapper">
<!-- #searchform -->
											<form method="get" id="searchform" action="http://guillermomateo.es/vinosybodegas3/">
													<i class="icon_search icon-search-fine"></i>
						<a href="#" class="icon_close"><i class="icon-cancel-fine"></i></a>
						<input type="text" class="field" name="s" id="s" placeholder="Escriba su búsqueda" />			
						<input type="submit" class="submit" value="" style="display:none;" />
</div>
    
asked by tamueka 29.05.2017 в 23:10
source

1 answer

1

Add this style, I hope it works for you 

#Header_creative {
background-position: center bottom;
background-repeat: no-repeat;
background-size: 50% auto; 
}

you can adjust the 50% percentage to your liking

    
answered by 29.05.2017 / 23:19
source
My jquery cdn is not working in linux Mint Embed PDF with Django