51

I dont want to use html tag. This is my css. I am using bootstrap 3.0.

background:url('images/ip-box.png')no-repeat;
background-size:100%;
height: 140px;
display:block;
padding:0 !important;
margin:0;

On 100% zoom this is OK. but when I zoom in at 180% approx, the image will be short from top and bottom, I want some css tricks.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Faizan
  • 1,132
  • 2
  • 12
  • 23

7 Answers7

73

For full image background, check this:

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
fiskolin
  • 1,421
  • 2
  • 17
  • 36
19

You need to use background-size: 100% 100%;

Demo

Demo 2 (Won't stretch, this is what you are doing)

Explanation: You need to use 100% 100% as it sets for X AS WELL AS Y, you are setting 100% just for the X parameter, thus the background doesn't stretch vertically.


Still, the image will stretch out, it won't be responsive, if you want to stretch the background proportionately, you can look for background-size: cover; but IE will create trouble for you here as it's CSS3 property, but yes, you can use CSS3 Pie as a polyfill. Also, using cover will crop your image.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • i cant use width bcoz my design is responsive. If i use background-size: 100% 100%; the image stretchs vertically. This is nt good. is there any other option..?? – Faizan Sep 04 '13 at 11:44
  • @Faizan than go for jQuery – Mr. Alien Sep 04 '13 at 11:47
  • I really thought boostrap would be less pointless, unable to do basic stuff like this and with restricted sizes, probably would make more sense and generate less work to just write quality custom css. – Dan Apr 23 '14 at 23:37
  • background-size: 100% 100%; this works for me. Thanks a lot – Jagz W Nov 15 '15 at 03:53
  • What I needed was background-size: 100% auto; – Separatrix Jan 19 '16 at 15:27
9

I found this:

Full

An easy to use, full page image background template for Bootstrap 3 websites

http://startbootstrap.com/template-overviews/full/

or

using in your main div container:

html

<div class="container-fluid full">


</div>

css:

.full {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}
raduken
  • 2,091
  • 16
  • 67
  • 105
4

Check this out,

body {
    background-color: black;
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
Levent Divilioglu
  • 11,198
  • 5
  • 59
  • 106
1

The file path 'images/ip-box.png' implies that the css file is at the same level as the images folder.

It's probably more common to have 'images' and 'css' folders at the same level as the 'index.html' file.

If that were the case and the css file were one level down in its respective folder, then the path to ip-box.jpg as specified in the css file would be: '../images/ip-box.png'

wkille
  • 543
  • 6
  • 12
1

Set Responsive and User friendly Background

<style>
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
</style>
pradip kor
  • 459
  • 4
  • 8
1

Try this:

body {
  background-image:url(img/background.jpg);
  background-repeat: no-repeat;
  min-height: 679px;
  background-size: cover;
}
RiggsFolly
  • 93,638
  • 21
  • 103
  • 149