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.

Web site with large background image

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

13 years 8 months ago
Hello,
My name is Stefan, I'm fromParis and I have one client who would like to have a web site with a large background image which would take at least 1 third of the screen while the main body (menu, texts etc) would only cover 2/3 of the screen - a bit like in this example : www.fiveyellowducks.com/

I'm far from being an expert and I would like to know, using templates such as avanti, praise, bliss etc I could reduce the size of the main body (to 500 px for example) so that one could always see a large part of the background image on the left.

Hope this is clear enough...?

Thank you in advance for your help.

STefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
Not sure if it will do the trick, but you can very easily do this with Zen Grid framework based templates

Under the template Layout tab you can enter any width you like in the Template Width parameter (i checked in NewsStream, not sure if it is available for all templates.
  • Astrophel's Avatar
  • Astrophel
  • Free Extensions
  • 166 posts
  • 2 Thanks
  • Karma: 12
The administrator has disabled public write access.
13 years 8 months ago
Agreed. Stick to any of the Zen Grid based templates and this will be very easy to achieve.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
13 years 8 months ago
Hello,

Thank you both for your quick reply. I'll try and tell you of it worked.
Should I try to change the width in the template.css.css file of the template I use or go directly in the zen grid framework to change the width?
Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
If you are using any Zen Grid based template (Grid2 is an exception though) you can change the template width in the template settings, you can see the option in the screenshot on this page:

www.joomlabamboo.com/documentation/zen-grid-framework-general-layout-settings
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
13 years 8 months ago
Thank you very much Seth. I now see exactly what you mean. I'll stick to the zen grid based template since it is very easy to change the width this way.

Thanks again to both of you for your very helpful answers.

Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
No problem Stefan.

Let us know if there is anything else we can help with.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
13 years 8 months ago
Hello Seth,

It's me again.....

I hope I do not disturb you to much with my basic questions. I'm a big fan of Joomla and JB templates but unfortunately I have little experience and knowledge in CSS etc.

Concerning the web site I'm building for my client with a large image in the background :

If i'm taking a JB template like avanti, ecolift or newstream which does not seem to have an image as a background. Could you tell me in which part of my template (template.css.css I presume - or theme.css) I should add mycode for the reference of the image so that it appears in the background of all the web site as in the following example : fiveyellowducks.co.uk/blog/

Im' thinking of using the type of code I found in the tutorial of www.w3schools.com:

<html>
<head>
<style type="text/css">
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>

Your help will be greatly appreciated to help me and finalize this image backgound.

Thank you,

Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
Stefan,

In Newstream, go into your theme.css file and near the top of the code look for 'body'. This is the code I used to set a background image on the home page of www.graphicaholic.com/Newstream/

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

You'll want to adjust this to reflect your specific background needs but it is fairly straight forward.

Ed
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
13 years 8 months ago
Ed,

Thank you again. I followed your instructions and it is strating to look kike I would like. I still need to make some adjustments but I have the ideas and your indications have been very helpful.

Thank you again Ed,

Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
Ed,

After some adjustments, it looks almost like I want.

Could you let me know how I can, in the newstream template, increase the top margin of the main body so that the menu and main content start, for example, 150 px down from the top of the page - so that one could see the top of the background image.

Thank you again,

Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
Stefan,

You are most welcomed. I'm sure you will have no problems adding a background image into either Avanti or Ecolift since they all use the ZenGrid framework. Just go into their 'theme.css' file and add your background into into the 'body' code string. Let us know how else we can assist moving forward.

Ed
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
13 years 8 months ago
Hello Ed,

I'm re-sending my latest message that you may have not seen since I sent it just before you replied to my previous message :

Ed,

After some adjustments, it looks almost like I want.

Could you let me know how I can, in the newstream template for example, increase the top margin of the main body so that the menu and main content start, for example, 150 px down from the top of the page - so that one could see the top of the background image.

Thank you again,

Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
Hi again,

Concerning my image background issue, I have another question :

If I want to have an original shape for the background as in the following site (fiveyellowducks.co.uk/) I understand that I need a main background image for the middle part of the screen and another top image (background / header?) to deal with the top part of the screen and the specific shape (rounded angle and not horizontal top line).

Could you tell me if in the newstream template for example I need to insert in the css theme code 2 background images or if i need one background image and one image for the top header?

What type of code lines should I use - if you have any example that I could adapt, that would be very useful.

Thank you in advance for your help,

Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
Stefan,

Regarding the top position, edit your theme.css file and towards the top look for this line of code;

.fullWrap .containerBG {}

Change it to;

.fullWrap .containerBG {margin-top: 150px}

Adjust the 150px to your specific needs. As far as creating a background like the fiveyellowducks, this is done using an image and a color command using the line of code I posted.

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

The #fff command will be the background color when the image stops because I'm using the no-repeat command. Example: If I was going to reproduce the image and background color of the fiveyellowducks my body code would be;

body {background: #367890 url(../images/main-back.jpg) no-repeat center top}

Ed
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
13 years 8 months ago
A big big thank you Ed for your time and precious help.

It's past midnight here in Paris so I'll implement your instructions tomorrow and will let you know how it's been working for me.

I greatly appreciate your help,

Have a great sunday and many thanks again,

Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
Stefan,

Your most welcomed and please let us know how things work out on your end. I'll be doing the 'day-job' tomorrow (Sunday) but will be able to check-in throughout the day to catch your progress.

Ed
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
13 years 8 months ago
Hello, it's me again... even on sunday!

I am using the newstream jb template and followed your instructions regarding the background image.

Here is the code I used to put the background and lower the top of the body :

body {background: #000000 url(../images/qual-wallpaper-nature-21.jpg) no-repeat center top}

.fullWrap {}
.containerBG {margin-top: 70px}

You can see my trial in my test sub domain : www.qualresearcher.partenairewebdepuis2004.fr

I am using K2 - I created some menus and one article called "société" linked to the menu Société.

Unfortunately, the article does not show - while when I switch to another template (avanti for example) for which I did not modify any CSS, I can see the article...

Could you tell me what I am missing? Why is my article not displayed?

Thank you for your help,

Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
Hi again,

Another question on top of the previous one concerning my articles not showing with my background image.

Could you explain me how I can align the width of my main body (600 px for example) with the width of a part of my background image (which is also 600 px wide)?

You can see in my example : www.qualresearcher.partenairewebdepuis2004.fr/ (please do not pay attention to the design, it's only for testing).
In this example, I would like the dark area of my background image (almost black) to be horizontally aligned with the width of the main body which is also 600 px wide.
Once the 2 vertical sides are aligned, I will only have to "play" with the height of my main body to have a perfect alignment like in the 5 yellow ducks example : fiveyellowducks.co.uk/

Thank you again for your help,

Stefan
  • stetvilla's Avatar
  • stetvilla
  • 6 Month Developer
  • 395 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 8 months ago
Hi there,

Not 100% clear on the look you are trying to achieve, but you can shift the background image around by positioning it like this (changes highlighted):

body {background:url("../images/qual-wallpaper-nature-21b.jpg") no-repeat scroll 130px 0 #012B02;}

For the K2 article, do you have a K2 template assigned to the K2 category the item belongs to?
  • 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

Close