Insert a background image in CSS Twitter Bootstrap

Question

How can i add a image background to my website    body        margin  0       background  url background png        background-size  1440px 800px       background-repeat no-repeatdisplay  compact       font  13px 18px  Helvetica Neue   Helvetica  Arial  sans-serif    I did that much but nothing shows up on my page  I m a CSS beginner   Updated   body    margin  0   background-image  url     img background jpg    background-size  1440px 800px   background-repeat no-repeat   display  compact   font  13px 18px  Helvetica Neue   Helvetica  Arial  sans-serif

User · Answer

For more modularity and in case you have many background images that you want to incorporate wherever you want you can for each image create a class :

.background-image1  
{
background: url(image1.jpg);
 }
.background-image2  
{
background: url(image2.jpg);
 }

and then insert the image wherever you want by adding a div

<div class='background-image1'>
    <div class="page-header text-center", style='margin: 20px 0 0px;'>
         <h1>blabaaboabaon</h1>
    </div>
</div>

User · Answer

body       background-image  url your image link       background-position  center center      background-repeat  no-repeat      background-attachment fixed      background-size  cover      background-color   464646

User · Answer

The problem can also be the ordering of your style sheet imports   I had to move my custom style sheet import below the bootstrap import

User · Answer

Is your image on the same folder directory as your css file  If so  your image url is correct  Otherwise  it s not    If by any chance your folder structure is like so     webpage  -index html -css - - style css - images - - background png  then to reference the image on your css file you should use the following path      images background png  So that would be background  url     images background png     The logic is simple  Go up one folder by typing        as many times as you need   Go down one folder by specifying the folder you wish to go down to

User · Answer

If you add the following you can set the background colour or image  your css    html         background-image  url  http   yoursite i tile jpg         background-repeat  repeat         body        background-color  transparent        This is because BS applies a css rule for background colour and also for the  container class

User · Answer

Put the background url in quotes   It should be background  url  background png     See here for working demo   You also have an issue with the background-repeat line missing a semicolon in between two statements  If your background is really tiny you won t see it because of that issue   Just to update on the solution  among the other issues  the background file was being refrenced with     background jpg when it should have been    background jpg  2 dots  not 3

User · Answer

And if you can t repeat the background image  for esthetic reasons    then this handy JQuery plugin will stretch the background image to  fit the window   Backstretch http   srobbin com jquery-plugins backstretch   Works great      Cheers

User · Answer

isn t the problem the following line is incorrect as the statement for background-repeat isn t closed before the next statement for display     background-repeat no-repeatdisplay  compact    Shouldn t this be   background-repeat no-repeat  display  compact    adding or removing quotes  in my experience  makes no difference if the URL is correct  Is the path to the image correct  If you give a relative path to a resource in a CSS it s relative to the CSS file  not the file including the CSS

User · Answer

Adding background image on html  body or a wrapper element to achieve background image will cause problems with padding  Check this ticket https   github com twitter bootstrap issues 3169 on github  ShaunR s comment and also one of the creators response to this  The given solution in created ticket doesn t solve the problem  but it at least gets things going if you aren t using responsive features   Assuming that you are using container without responsive features  and have a width of 960px  and want to achieve 10px padding  you set    container      min-width  940px     padding  10px

[css] Insert a background image in CSS (Twitter Bootstrap)

Examples related to css

Examples related to twitter-bootstrap