CSS - background image for UI Kit - html

Question

I've tried to modify background image of a div ...
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="uk-vertical-align uk-text-center" style="background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEzMHB4IiBoZWlnaHQ9IjQ1MHB4IiB2aWV3Qm94PSIwIDAgMTEzMCA0NTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExMzAgNDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSIxMTMwIiBoZWlnaHQ9IjQ1MCIvPg0KPC9zdmc+DQo=') 50% 0 no-repeat; height: 450px;">
<div class="uk-vertical-align-middle uk-width-1-2">
<h1 class="uk-heading-large">Games are life, games are love.</h1>
<p class="uk-text-large">If you are a trully gamer and a lover of fps/moba/rpg you are in the right place. We are a big community of gaming, we sell games and help you to get the latest ones you would like to have.</p>
<p>
<a class="uk-button uk-button-primary uk-button-large" href="#">Button</a>
<a class="uk-button uk-button-large" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
This <div class="uk-vertical-align uk-text-center" it's the div i need to modify.
If i replace background: url with background-image: url() it doesn't work, i have the image i want in folder images where website is placed.
Any idea what could I do ? i searched this problem .. i tried a lil bit with CSS in uikit.css, nothing works.
Thank you in advance for your time and help.

Answer 1

Nothing is wrong, it's work just see this snippet with black body.
Your data image it's just a color, no content.
If you want to call image in a folder try to make
background: url('./folder/path_to_your_img')
body{
background-color: #000;
}
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="uk-vertical-align uk-text-center" style="background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEzMHB4IiBoZWlnaHQ9IjQ1MHB4IiB2aWV3Qm94PSIwIDAgMTEzMCA0NTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExMzAgNDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSIxMTMwIiBoZWlnaHQ9IjQ1MCIvPg0KPC9zdmc+DQo=') 50% 0 no-repeat; height: 450px;">
<div class="uk-vertical-align-middle uk-width-1-2">
<h1 class="uk-heading-large">Games are life, games are love.</h1>
<p class="uk-text-large">If you are a trully gamer and a lover of fps/moba/rpg you are in the right place. We are a big community of gaming, we sell games and help you to get the latest ones you would like to have.</p>
<p>
<a class="uk-button uk-button-primary uk-button-large" href="#">Button</a>
<a class="uk-button uk-button-large" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>

Answer 2

Try This this will help you.
.uk-vertical-align{
background-image:url("https://zellox.com/wp-content/uploads/2016/02/background-image-in-html.jpg");
height: 450px;
}
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="uk-vertical-align uk-text-center">
<div class="uk-vertical-align-middle uk-width-1-2">
<h1 class="uk-heading-large">Games are life, games are love.</h1>
<p class="uk-text-large">If you are a trully gamer and a lover of fps/moba/rpg you are in the right place. We are a big community of gaming, we sell games and help you to get the latest ones you would like to have.</p>
<p>
<a class="uk-button uk-button-primary uk-button-large" href="#">Button</a>
<a class="uk-button uk-button-large" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
write Your image path instead of (https://zellox.com/wp-content/uploads/2016/02/background-image-in-html.jpg)