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;
     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,


Thanks for reading.

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: Logo

You are commenting using your 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 )

Connecting to %s