CODEWITHSUNDEEP
csstwitter-bootstrap
AppSensei
AppSensei

Reputation: 8410

Insert a background image in CSS (Twitter Bootstrap)

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;

Upvotes: 23

Views: 209898

Answers (9)

Half_Duplex
Half_Duplex

Reputation: 5234

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.

Upvotes: 0

Koryun Vardapetyan
Koryun Vardapetyan

Reputation: 11

body {
    background-image: url(your image link);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    background-color: #464646;
}

Upvotes: 1

Samawi
Samawi

Reputation: 1

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>

Upvotes: 0

Paul Brady
Paul Brady

Reputation: 518

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!

Upvotes: 1

sata
sata

Reputation: 21

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

Upvotes: 2

Christopher A. Lewis
Christopher A. Lewis

Reputation: 65

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.

Upvotes: 1

sachleen
sachleen

Reputation: 31141

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).

Upvotes: 38

Mike Sav
Mike Sav

Reputation: 15321

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.

Upvotes: 6

Paulo R.
Paulo R.

Reputation: 15619

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.

Upvotes: 2

Related Questions