Joomla Templates Club 406,261 posts

[mfinke Friend mfinkeJoin date: December 2009Posts: 10Downloads:0Uploads:1 Thanks: 2 Thanked: 2 times in 1 posts]

#169965

Hi there,

i have a problem and cant solve it on my own.(using the events-template and the green theme)
I changed the background image “wrap-bg-jpg” to my own background image which is 2004 px * 3613 px
here`s the site: http://www.kulturzelt.de/cms/

what i want is that the background image should fit to all screen resolutions.

I found the css-code in the colors.css in the theme-folder …templatesja_eventscorethemesgreencss

I tried to change the existing code

#ja-wrapper { background-image: url(../images/wrap-bg.jpg); }

to

#ja-wrapper { background-image: url(../images/wrap-bg.jpg); width: 100%}

but that does not work.

Any ideas for the correct css-code?

Thank you so much!

marc

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#421027

Hi,
You replace this code from /templates/ja_events/css/template.css in the line #653

#ja-wrapper {
background: url(../images/bg.jpg) no-repeat top right;
}
with

]#ja-wrapper {
background: url(../images/bg.jpg) ;
}
– You will see your website change to size the background .

[mfinke Friend mfinkeJoin date: December 2009Posts: 10Downloads:0Uploads:1 Thanks: 2 Thanked: 2 times in 1 posts]

#421031

Hi,

thanks for your help.
I changed the code like u said.
But the background image ist not fitted, it is 2004 px wide (original size) – it should be 1280 px wide with my resolution.

btw: why do i have to change the tags for “bg.jpg” when (using the green theme) the backgorund image is named wrap-bg.jpg!?

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#421036

You use photoshop to change background image resolution.

btw: why do i have to change the tags for “bg.jpg” when (using the green theme) the backgorund image is named wrap-bg.jpg!?

I don’t understand what you mean clearly.

[mfinke Friend mfinkeJoin date: December 2009Posts: 10Downloads:0Uploads:1 Thanks: 2 Thanked: 2 times in 1 posts]

#421038

Ok, sorry for my english. I will try to explain again. :-/

I use the background image “wrap-bg.jpg” which is 2004*3613 px.
What i want is that the image is sized to 100% of the browser-window-size / resolution of the user.
For example, if somebody uses 1280*1024px, the background image should be “downsized” to 1024px wide.
I dont want that the user sees just the left part of the image in original size (or middel part if the image is centered).
he/she should see the full image, just smaller.

i thought that this could be solved with a “width=100%”-css-tag.
But i am not sure – and have no clue how to code this.

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#421039

You find this code from /templates/ja_events/core/themes/green/css/color.css

#ja-wrapper {
background-image: url(../images/wrap-bg.jpg);
background-size: 1280px 1024px; < add this line
}

[mfinke Friend mfinkeJoin date: December 2009Posts: 10Downloads:0Uploads:1 Thanks: 2 Thanked: 2 times in 1 posts]

#421061

Thank you – thats it.
i added

background-size: 100%
to the color.css like described above AND
in template.css added again the

#ja-wrapper { background: url(../images/bg.jpg) no-repeat top right}

so i now have the effect, that the image is flexible in width and will not repeat in height.
perfect, thanks alot!

marc:)

[Author]

Posts