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;

sachleen · Accepted Answer · 2012-06-08 17:15:05Z

38

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

edited Jun 8, 2012 at 17:15

answered Jun 8, 2012 at 16:20

sachleen

31.2k8 gold badges82 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sachleen Over a year ago

Does the background image in my demo work? Replace the url of your image with the Google logo I used and see if that works. Maybe you have a large div covering up the body or something.. care to share your html along with any other css you have?

AppSensei Over a year ago

The demo code worked fine. Maybe i should use a URL? is there way to upload an attachment?

sachleen Over a year ago

The URL is relative to your CSS file. So if you have styles/mycss.css and images/mybackground.jpg it should be ../images/mybackground.jpg (only two dots, not 3 like you have). Also don't forget the closing brace } at the end.

AppSensei Over a year ago

Ohh wow, It worked. Thank You. I had no idea the dots had something to do with the location. So, just to make clear, every dot for every folder in go in?

sachleen Over a year ago

No, . is current directory so ./myfile is in the current working directory. ../ is "go up one directory" so ../myfile is a file named myfile one level above this one. So if you're in mysite/css/mycss.css then ../myfile is /mysite/myfile. One dot is current directory, two dots go up a directory. You can keep it up with ../../ to go up two directories and so on.

Mike Sav · Accepted Answer · 2012-06-08 16:43:54Z

6

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.

edited Jun 8, 2012 at 16:43

answered Jun 8, 2012 at 16:25

Mike Sav

15.4k31 gold badges104 silver badges150 bronze badges

Comments

Paulo R. · Accepted Answer · 2012-06-08 16:31:34Z

2

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.

answered Jun 8, 2012 at 16:31

Paulo R.

15.7k4 gold badges33 silver badges42 bronze badges

3 Comments

AppSensei Over a year ago

I tried everything ...my location is correct too. But, no luck.

Paulo R. Over a year ago

what's the display: compact in there for?

Paulo R. Over a year ago

it's not the "display: compact" i was just wondering why you're using it. I don't think you need it. Is there no typo on your image name? Is there not an element covering your body background with it's own background?

sata · Accepted Answer · 2013-01-30 04:50:25Z

2

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

edited Jan 30, 2013 at 4:50

answered Jan 30, 2013 at 3:21

sata

212 bronze badges

Comments

karthikr · Accepted Answer · 2012-10-11 16:27:03Z

1

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.

edited Oct 11, 2012 at 16:27

karthikr

100k26 gold badges208 silver badges191 bronze badges

answered Jul 13, 2012 at 12:15

Christopher A. Lewis

658 bronze badges

Comments

Paul Brady · Accepted Answer · 2013-05-20 22:49:24Z

1

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!

answered May 20, 2013 at 22:49

Paul Brady

5184 silver badges10 bronze badges

Comments

Koryun Vardapetyan · Accepted Answer · 2015-03-04 10:41:12Z

1

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

answered Mar 4, 2015 at 10:41

Koryun Vardapetyan

111 bronze badge

Comments

Samawi · Accepted Answer · 2014-07-31 16:34:45Z

0

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>

answered Jul 31, 2014 at 16:34

Samawi

11 bronze badge

Comments

Half_Duplex · Accepted Answer · 2016-06-30 18:46:20Z

0

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.

answered Jun 30, 2016 at 18:46

Half_Duplex

5,2467 gold badges49 silver badges62 bronze badges

Collectives™ on Stack Overflow

Insert a background image in CSS (Twitter Bootstrap)

9 Answers 9

5 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related