How to get block background to continue across full width of screen


I'm trying to work out how to make the background colour / images of the various blocks in my web pages, continue to the full width of the screen. An example of what I am trying to achieve is [url=“”][/url] where Sarah Parmenter continues the blocks of colours horizontally across the screen.

When I try with blocks, they only go as far as the 960 grid. I want to push outside of the grid but only on one page of the site (maybe more later).

Apologies if this is covered elsewhere in the forum, but I don't know the correct terminology for what I am trying to do and therefore have not been able to find any helpful discussions.

Let me know if this is possible using custom HTML blocks or divs. If Divs, be clear as my CSS skills are novice at best.


Thanks, Triplets. I replaced the old CSS 960 file the new css file but I'm still not sure how to get the block to go full width. Any ideas?

Update: now it makes everything full width (but not quite full width). I only wanted to do this on a few blocks. Any idea how to

  1. get it to actually go full width of the page? Right now, it's going about 90%
  2. how to keep the other blocks from going full width?

As an example for the footer, you might try css similar to:

#ci_bottom_wrapper {
width: 100%;
background: url(../images/footerrepe.jpg) repeat-x 0 0;


Yo could make it by creating a custom background, and overriding the body background in the block by inserting a style tag like:


body {background: #fff url(skins/basic/customer/images/my_custom_body_bg.png) 0 0 repeat-x;}


Hi All,

I am looking to do the same as m33. I installed the new 690.css and then got a little lost. How did it work out ??

So, I need to put a complete background in throughout the site and wanted some help on doing this. I'm running V3 CS Cart

Anyone had any luck doing this yet ?

Hi guys, thanks for your response. @tbirnseth Where would I put that css? I tried it in the actual block but it didn't work. also, I tried using the inspect element feature in chrome and tried pasting it around different areas of the css but it didn't really work out for me. I know I'm close but I can't figure it out.

@ web2arab, I tried that solution too. I just created the image, put it in the path shown in the URL but when I copied that code and put it into an HTML block, nothing happened.

On my client's site, it is the wrapper that surrounds the bottom container. I.e. you have ci_top_wrapper, ci_central_wrapper and ci_bottom_wrapper. There is no standard style property set for this id. Hence whatever you define there should work properly. You'll have to use the appropriate imagery for your site. The background url() is specific to the site I pulled this from.

Thanks, Last question, where do I find the code for these wrappers? What file is located in?

Ok, I partly figured it out. in style.css, I put[color=#000000][font=Menlo, monospace][size=2]

#ci_central_wrapper {
width: 100%;
background: url(images/my_custom_body_bg.png) repeat-x 0 0;

[color=#000000][font=Menlo, monospace][size=2]

This is great as it does overide the grid with my custom background image. However, how would I now only call this overide where I need it? I only want some pages to display it and I'm trying to get multiple sections to overide on one page. Like they way they did it here [url=“”][/url][/size][/font][/color]

Template where the div is created is:


I would make the css an included file and then in that included file I would set whatever conditions you want it to display.


{assign var="use_this" value=true}
{if }
{assign var="use_this" value=false}

{if $use_this}
#your_id { your_property: your value;}

I would not alter styles.css but instead use a my_changes.css file done with the hook. If it were done this way, then the logic for whether to include it for a particular controller/mode would be done in the file.