CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbackgroundcontainers
VioletGil
VioletGil

Reputation: 23

How to make a background image in twitter bootstrap around a container

I have a pretty standard bootstrap layout with a fixed size container going down the page. I'm wondering, however, if there is some way of decorating the areas to the left and right of the container in order to make it look less bland, such as with background images/colors/css styling etc. I know the point of the container is to allow for responsive design, but is there a way that I can do this customization or does it go against the point of having the container in the first place?

Upvotes: 0

Views: 66

Answers (2)

Gabriel Ojomu
Gabriel Ojomu

Reputation: 192

Add a background image to the body 

body{
    background: #color url(image.jpg/png) no-repeat left top; /* non repeating background */
    /* background: #color url(image.jpg/png) repeat-x left top; repeating the background in a vertical direction */
}

I will also advised that the image is carefully selected to fit into your page width if you are using image. You can also remove from url... to use just color

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16311

Just apply the background color/image/ etc to the body tag like this:

body {
    background-image:url(someImage.jpg);
    /* other css properties */
}

The above will only affect the area outside the container div wrapping your page elements.

Upvotes: 1

Related Questions