Please wait for 15 seconds...

Friday 30 August 2013



Today I will explain how to cover half HTML body background with image. Often web designers need to create it. In this tutorial I am using background-size, which is CSS3 element.

I am showing you here two methods to complete this task. In first method we will insert image into body background using CSS and CSS3 & cover half of the body. In second method we will cover half of the screen using CSS and jQuery. So let's get start it.


Put below codes in your HTML page between <head></head>.





 Method 1   





 Method 2   





Method 1: (Cover half of the body)

CSS

<style type="text/css">
body{
background-image: url(bg_img.jpg);
background-size: 100% 50%;
background-repeat:no-repeat;
}
</style>

Here background-image contains background image, background-size sets background image size. It’s first parameter is width and second is height of the background image. Do not forget to set background-repeat:no-repeat;. This trick works pretty good on Google Chrome and Mozilla Firefox. If you want to adjust background image position then use background-position: width height;

Method 2: (Cover half of the screen)

CSS

<style type="text/css">
body{
background-image: url(bg_img.jpg);
background-repeat:no-repeat;
}
</style>

Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var h = $(window).height();
$('body').css('background-size', '100% '+(h/2)+'px');
});
</script>

In the second method I am getting screen height from jQuery .height() and setting it’s half to body background-size for height.

I hope you enjoy this tutorial and do not hesitate to leave comment and query.

Posted by Atul

0 comments:

Post a Comment

Techsirius on Facebook