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.

background image in the simple shop

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

Hello all club
Before making a new wonder I want to thank everyone for help until ow obtained.

I insert background image left and right as you can see from this link
www.graphicaholic.com/Newstream/

if this is possible please explain with great patience as I do.

Thanks 1000!!!!!
  • hi-tech's Avatar
  • hi-tech
  • 12 Month Developer
  • 51 posts
  • Karma: 0
The administrator has disabled public write access.
Hi there,

Ed did this, so he may be able to offer you more advice. It looks like he just added the image as a background to the body, putting this in theme.css:

body {background:url("../images/dk-ornate1-grey4.jpg") no-repeat scroll center top #FFFFFF;}

The original image is wide enough to filll the space nicely. I think that is Ed's original work there, so please don't use the image without asking his permission. ;)
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Ferdinando,

The background layout you are asking about I did on my Newstream demo site. Seth is correct with the code string I used and he is also correct regarding the actual background size, it is large...

The actual size of the background I used is 1920px by 511px. In addition, by using the 'no-repeat scroll center top' CSS call, it keeps the background fixed regardless of what monitor the end user is viewing from. The key in creating this background was 'cutting out' the center area so that JB Slideshow would sit in front. I did this for two reasons 1) to reduce the file size slightly and 2) because Newstream uses transparent borders, I wanted a bleed effect from a dark pattern background to a solid white. Below is a very reduced reproduction of this background to give you an idea of what I did to achieve this overall effect. In closing, Seth is very correct in talking about getting permission to use this background. I do not own the rights to this image so I can not sell it, distribute it or give others permission to use/copy it for their needs or wants. I am using it purely for demonstration and it is not intended for commercial use or distribution.

I hope this answers your question regarding 'how' the background was achieved...

Ed
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
Hello how are you?
I received your very clear explanation.

I have tested with any picture as you can see from this link: www.aniloae.com / joomla
body (background: # fff url (.. / images / greca.jpg) no-repeat top left; color: # 777; line-height: 2em)

I noticed that the page when IE Maximize the vision is OK, when is the Restore Down image is invalid, maybe this problem is caused by the background image.
Tomorrow morning I try to create an image as per your instructions.


Another question, if I want the background image remains fixed, and scroll the page only thing I put in the code?
I tried this code but does not work with IE.
body (background: # fff url (.. / images / greca.jpg) no-repeat scroll top left; color: # 777; line-height: 2em)

Greetings to you all and thanks for the quick response
Ciao Ferdinando :)
  • hi-tech's Avatar
  • hi-tech
  • 12 Month Developer
  • 51 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Ferdinando,

You also need to add a background colour to the following rule:
.containerBG {background: #fff}

You can add that to the theme.css file.

Cheers Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Hello Antonio,
Thank you for your kind response but does not work you can give me more information?

Forgive my stupid questions but I'm not a programmer.

Hello and Good Day
Ferdinando
  • hi-tech's Avatar
  • hi-tech
  • 12 Month Developer
  • 51 posts
  • Karma: 0
The administrator has disabled public write access.
Ah ok I may have misunderstood what you are trying to achieve. Can you try again?

Cheers Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
I would like to insert a fixed image on the sides, with a homepage that scroll effect
(See picture attached)

ciao Ferdy
  • hi-tech's Avatar
  • hi-tech
  • 12 Month Developer
  • 51 posts
  • Karma: 0
The administrator has disabled public write access.
scroll means that the image will scroll.

Just replace scroll in your code with fixed.

body (background: # fff url (.. / images / greca.jpg) no-repeat fixed top left; color: # 777; line-height: 2em)
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Hello
YES YES YES It works, you are great .............

I noticed a small problem, because being maximize the image side is ok.
While in the Restore Down, the image side is surmounted by a Web page.

You can also see error. www.aniloae.com/joomla

Thank you
  • hi-tech's Avatar
  • hi-tech
  • 12 Month Developer
  • 51 posts
  • Karma: 0
The administrator has disabled public write access.
Just assign a solid colour to the content background, using .containerBG

.containerBG {background: #fff;

Makes the background solid white.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Ok thanks, you were very kind.
Unfortunately I did not understand the instructions of Anthony.

Everything worked perfectly
Thanks to all of you

Hello Ferdy :laugh:
  • hi-tech's Avatar
  • hi-tech
  • 12 Month Developer
  • 51 posts
  • Karma: 0
The administrator has disabled public write access.
No problem!
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.

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

Happy Campers