Setting background image of webpage using CSS

I am a developer and designing mainly CSS takes hell out of me. So even to do a small things like setting background image of web page takes lot of effort of me. I am working on an application and using Twitter Bootstrap for the designing purpose. I had a requirement to set background image using bootstrap. In this post I am sharing how can you do that? I know for many of you it may be super easy or may have better way to do. I am sharing this tips for developers like me who does not have any idea how CSS and bootstrap works.


body {
     margin: 0;
     background: url('bg5.jpg');
     background-size: 1440px 800px;
     background-repeat:no-repeat;
     display: compact;
}

I have put image in the root folder of application. I hope this quick tip may help you. After setting this application looks like,

clip_image002

Thanks for reading.

Published by

Dhananjay Kumar

Dhananjay Kumar is Developer Evangelist for Infragistics. He is a 8 times Microsoft MVP and well respected Developer Advocate in India.He is the author of 900+ Blog Posts, and can often be found speaking around India at conferences and hosting free workshops for programmers across the country. So far, he has hosted 60 free workshops on various topics like JavaScript, Angular, WCF, ASP.NET MVC, C#, Azure etc. Follow him on twitter @debug_mode for all the updates about his blog posts and workshops. You can send him email at debugmode [at] outlook [dot] com

3 thoughts on “Setting background image of webpage using CSS”

  1. Don’t ever use a specific size for background images, like you just did with “1440px 800px”. Use “cover” or “100% auto” instead and then tinker it to perfection with background-position.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s