Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

full screen background images newstream2

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

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.
  • Harlequin's Avatar
  • Harlequin
  • LIfetime Developer - Big Bamboo
  • 206 posts
  • 2 Thanks
  • Karma: 0
The administrator has disabled public write access.
Hi

With scaleable what are you wanting the image to do?

There is no position available but you could add a css background image
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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.
  • Harlequin's Avatar
  • Harlequin
  • LIfetime Developer - Big Bamboo
  • 206 posts
  • 2 Thanks
  • Karma: 0
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I'm using an image in the root of the newstream2 template image folder

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks Paul. I'll give it a go. Your help is as always appreciated :)
  • Harlequin's Avatar
  • Harlequin
  • LIfetime Developer - Big Bamboo
  • 206 posts
  • 2 Thanks
  • Karma: 0
The administrator has disabled public write access.
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
  • Harlequin's Avatar
  • Harlequin
  • LIfetime Developer - Big Bamboo
  • 206 posts
  • 2 Thanks
  • Karma: 0
Last Edit: 2 years 2 months ago by Harlequin.
The administrator has disabled public write access.
It's a tricky one as the template wasn't really designed for this

Each row has a container - so you could target this
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
#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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
You would also need to use an !important

{background:#eee; padding:0 1em !important;}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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
  • Harlequin's Avatar
  • Harlequin
  • LIfetime Developer - Big Bamboo
  • 206 posts
  • 2 Thanks
  • Karma: 0
The administrator has disabled public write access.
Hi Tony,

Yes it isn't a simple process adding this

Best of luck

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers