RaviGold RaviGold - 2 months ago 40
CSS Question

Twitter Bootstrap Modal Inserting a Background Image

I have a modal and I want to add a background image. I can change the background color of the entire modal and the background color inside the modal but I can't find a way to make the background of the entire modal an image.

In other words, when the modal pops up I want it to look like a TV is popping up on the screen (TV is obviously my background image).

I went into the css and messed around but I think I am putting in the wrong key words.

I tried background: url();
I tried background-image: url()

I tried putting the image as it's own class and then trying to bring the class in but that doesn't seem to work either.

Any thoughts???

Answer

Yeah it would be helpful to see the html of your modal and or find out which version of bootstrap you are using.

Here is an example of setting the background of an modal in Bootstrap 3. In this example the background encompasses the whole modal. But you could also adjust it to only the background of the body etc..

.modal-content{
    background-image: url('pathToImage');
}

Example

http://www.bootply.com/94443