skip to Main Content

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?

2

Answers


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

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search