Joomla Templates Club 406,261 posts

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#151892

How can I make the background image expand completely to cover the screen?
(*see attachment for clarification)

The template expands perfectly when using Internet Explorer, but when Firefox/Safari/Chrome is used, the background image does not expand completely.
(*This only happens when the page content is short.)

Thank you.

---

Attachments:

1. 

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#347564

Hi Sobe,

Could you please kindly posting your url here for a further checking ?

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#347685

Hello dathq,
The url is http://sofi-ventures.com/
Thanks for helping

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#348062

Hi Sobe,

Do you mind posting here again your attachment file ? I just checked your site but it is hard to see the issue !

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#348235

Here’s the image.
The space which I’m referring to is marked by the vertical red line.
Thanks again for your help.

---

Attachments:

1. 

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#348241

If you put some content on the page it won’t be small, that’s because the repeat is just down the footer pos

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#348434

<em>@pascm 184338 wrote:</em><blockquote>If you put some content on the page it won’t be small, that’s because the repeat is just down the footer pos</blockquote>

Thanks for the suggestion pascm, but that solution is not very satisfactory. There are some pages (ex: login, contact, and others) which the content is small. I’ve noticed that on Internet Explorer, the background image extends completely (so it’s possible); is there not a way to edit the html or CSS to make the background fully-extend using other browsers are well?

Thank you

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#348439

You can try by adding on the /templates/ja_corona/css/template.css in the body{ } section the line min-height:800px; before the } tag

Explain better

Find in /templates/ja_corona/css/template.css

The
body {
background: #FFFFFF;
color: #333333;
font-family: Tahoma, Arial, sans-serif;
line-height: 1.6;
}

and change it to

body {
background: #FFFFFF;
color: #333333;
font-family: Tahoma, Arial, sans-serif;
line-height: 1.6;
min-height:800px;
}

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#348455

Thank you, that was helpful.
Instead of writing 800px, is there a way to make the background auto-fit the screen?

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#348477

put min-height:97%
as the min height property allows percentage of block

Property Values

Value Description length Defines the minimum height in px, cm, etc.
% Defines the minimum height in percent of the containing block
inherit Specifies that the value of the min-height property should be inherited from the parent element
Blessings Shannon

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#348519

<em>@uniquebiz 184644 wrote:</em><blockquote>put min-height:97%
as the min height property allows percentage of block

Property Values

Value Description length Defines the minimum height in px, cm, etc.
% Defines the minimum height in percent of the containing block
inherit Specifies that the value of the min-height property should be inherited from the parent element
Blessings Shannon</blockquote>

Hi Shannon,
Thanks for the suggestion, but putting 97% didn’t seem to work. The background is just as short as before. Any reason why the number is 97?

This is what is written:
body {
background: #FFFFFF;
color: #333333;
font-family: Tahoma, Arial, sans-serif;
line-height: 1.6;
min-height: 97%;
}

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#349037

Hi dathq,
It’s seems this thread has lost momentum. Have you come up with any solutions?
I tried using the “min-height: 800px” and the “97%” suggestions but none seem to be fully satisfactory.

Is there no way to make the background image auto-fit the screen?

Thanks

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#349039

Sobe
the 97 is a popular size when trying to use an auto resize, Ja uses it a lot for auto width as it stays within the maximum possible, and seems to be the equivelent to a std fully opened browser window without doing the forced open to 100% f11.

I’m pushed for time, but as I answered your post don’t want to ‘abandon you’ 🙂
here’s some interesting info on max height etc that may give you some clues,
http://www.w3schools.com/Css/css_dimension.asp
Blessings Shannon

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#349266

Hi Shannon,
Thanks again for your continued assistance. I’ve thoroughly explored the link you sent, and wrote and re-wrote the CSS is a variety of ways. The only time I’ve been able to create an actual change is when using Value Descriptions (px, etc); which is static and not automatic. However, when I use percentages (%) nothing happens. No matter the value it always goes back to the default size.

In an earlier message I wrote the exact CSS I was using. Shouldn’t that have worked? Is there something missing? Or is there something else about the Corona template that needs looking into?

Thank you

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#349325

In this case i might take under consideration to remove the bottom img.

[Author]

Posts