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.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s