[jakenorton]

Hi,

Not sure if this is possible, but I’d like to be able to put a colored background on my container in the site and have a background image. Is this possible? When I set an image currently, my content/text is overlaid on top of the image with a transparent background. Hope this makes sense.

Also, is it possible to “anchor” the background image so that the content scrolls on top of it, but it doesn’t change? Basically, I’d like an effect like you see on a Twitter page.

Thanks,

Jake

[jakenorton]

Anyone have any ideas on this? I’ve managed it in the past with some CSS, but never elegantly. Is this at all possible with Responsy?

Thanks,

Jake

[Mehmet S.]

We will get back to you asap.

[ahmetsali]

Hi, i guess you want a custom body background image and boxed layout with a custom color, paste and edit the code below to the custom css box;

This adds white boxed layout on a custom background image.

body { overflow-x:hidden; }
body > .container { position:relative; background:#fff; }
body > .container:before, body > .container:after { display:block; content: ""; position: absolute; top: 0; width: 40px; height: 100%; background: #FFFFFF; }
body > .container:before { left: -40px; }
body > .container:after { right: -40px; }

[jakenorton]

Hi Mehmet,

Thanks much for your reply – that worked perfectly for the background!

Is there any way to replicate the same for the header and footer? I can work without that, but it would be nice if possible.

And, do you have any thoughts on the background? On a previous website, I used some code in the body section of the css to make this happen – specifically, with the image targeted I used “center center fixed no-repeat” which essentially locked the background image in place and allowed the “container” to flow over it. Would that work here?

Thanks!

[ahmetsali]

Hi, here is the custom css to make the entire layout boxed with a fixed custom background image;

/* 
	BOXED LAYOUT */
	

/* custom body background */
body { background:url(../img/background/books.jpg) 0 0 no-repeat fixed; background-size:cover; }

/* boxed layout */
body { overflow-x:hidden; }
.container { position:relative; background:#fff; }
.container:before, .container:after { display:block; content: ""; position: absolute; top: 0; width: 40px; height: 100%; background: #FFFFFF; }
.container:before { left: -40px; }
.container:after { right: -40px; }

/* boxed footer */
.footer { padding:0; border:0; }
.footer .container { padding-top:50px; padding-bottom:30px; border-top: 2px dashed #ddd; }
.footer .container:before, .footer .container:after { top:-2px; border-top:2px solid #fff;}