Hi All
I am looking to place a background image outside the current template (Newstream2) on my site. I would like it to be scaleable to fit the browser width. It would be nice to put a shadow effect down the sides of the template so it stands off of the background image but this is not essential. Can someone point me in the right direction please?
Thanks for looking.

Hi

With scaleable what are you wanting the image to do?

There is no position available but you could add a css background image

With the shadow effect there isn't a div acting as a container for the content so it would be a case of adding it to several divs and then removing it on others

Cheers
Paul

Hi Paul, I am sure that a background image that would scale to fill the browser page width would work fine. I would not want it to be seen through the main web site template/page.
how would you add this? I assume it would be via custom CSS? the image perhaps labelled backgroundimage1 in a folder in the images folder?
what would the css look like please?

If I did want to see the image with perhaps some opacity behind the main template area would that also be possible?
Thanks for the help.

With a background image it doesn't scale

For example

body .t3-wrapper {
background: transparent url(../images/band.jpg) no-repeat !important;
background-size: cover !important;
float: left;
}

As the screen reduces less of the background image can be seen

I'm using an image in the root of the newstream2 template image folder

Cheers
Paul

Thanks Paul. I'll give it a go. Your help is as always appreciated

Hi Paul, the image shows right through the page so all the text and info looks poor any thoughts on how to resolve this? I guess a pale background image in a div as a container?
I could also stop the image higher up and add a gradient below it? Sorry, but your help with the css would be appreciated again.
Thanks

It's a tricky one as the template wasn't really designed for this

Each row has a container - so you could target this

#bannerwrap .container, #bannerwrap .container, #tabwrap .container, #grid2wrap .container, #grid4wrap .container, #bottomrow .container, #footerwrap .container {background:#eee;}

But you would need to consider padding which could be problematic for how the site displays

You would also need to use an !important

{background:#eee; padding:0 1em !important;}

Thanks Paul, understood.
I think I will use an alternative for now and play with the background on an offline site.
Appreciate the help
Tony

Hi Tony,

Yes it isn't a simple process adding this

Best of luck

Cheers
Paul