how to scale a background image automatically in joomla: joomla, scale, background

by: KravimirPosted on 2009-08-04 at 15:17:31ID: 25018737

Short answer: no.

Long answer: In CSS2.x background-images can't be scaled, however, you can use an absolute positioning trick to achieve the same affect with an inline image. Here's an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#wrapper {
  width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2; /* needed for Opera 6 */
}
#content {
  position: relative;
  z-index: 20;
}
#contentbg {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
#contentbg img {
  width: 100%;
  display: block;
}
 
/* hide from IE5/Mac \*/
* html #content {height: 1px;}
* html #wrapper {overflow-y: hidden;}
* html #contentbg {
  height: 100em;
}
/* end hide */
 
</style>
</head>
<body>
 
<div id="wrapper">
<div id="content">
 
<p>This technique works in IE5+/Win, Firefox, Safari, Opera 7+. (The workaround 
for IE5-6/Win works as long as you don't set a height on #wrapper.)</p>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec scelerisque 
purus vitae wisi accumsan fringilla. Aliquam nibh elit, imperdiet eu, 
scelerisque at, condimentum eget, leo. Nam dolor. Etiam rutrum. Nullam nulla 
nibh, sollicitudin in, dictum ut, ullamcorper id, mauris. Aenean ultricies, 
erat quis aliquet pellentesque, sapien nulla posuere nunc, sed tincidunt wisi 
wisi id quam. Donec magna ante, pellentesque eu, posuere sed, ultrices sed, 
velit. Sed id velit. Quisque sollicitudin lacus a ante. Etiam aliquam. Nulla 
vitae lectus. Mauris ante neque, blandit id, vehicula nec, iaculis vitae, wisi. 
Mauris quis elit sed quam interdum sollicitudin. Curabitur congue egestas 
velit. Nulla feugiat placerat felis. Praesent felis tellus, rutrum et, faucibus 
eget, sagittis non, ligula. Fusce porta, lorem at convallis vehicula, arcu eros 
egestas tellus, in bibendum ante metus vel nisl. Sed erat nulla, vulputate vel, 
fermentum et, feugiat nec, eros. Pellentesque augue tortor, rutrum eu, mattis 
id, ornare vitae, sapien.</p>
 
<p>Fusce convallis, odio eu commodo ornare, risus wisi scelerisque lectus, non 
feugiat sem turpis sit amet velit. Donec a mauris vitae diam mollis dapibus. 
Donec dignissim ultrices tellus. Curabitur sagittis dictum turpis. Integer 
accumsan wisi. Proin sodales pellentesque nibh. Nunc ultrices, libero sit amet 
aliquet egestas, dui wisi vehicula purus, ac ornare pede erat eu arcu. Nunc nec 
lacus posuere enim sodales luctus. Praesent vitae neque. In wisi nibh, sodales 
blandit, egestas eu, ultrices at, est. Suspendisse ullamcorper tincidunt 
sapien. Aliquam ac nisl vitae eros cursus aliquam.</p>
</div>
<div id="contentbg">
  <img src="example.png" alt="">
</div>
</div>
 
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:

Select all Open in new window

by: StormITSolutionsPosted on 2009-08-11 at 03:44:05ID: 25067574

Is the background image able to be repeated?
If so you can add this line to the css for the background

body
{background: url(images/yourimage.jpg) repeat-x }

1:
2:

Select all Open in new window

by: PjotterRPosted on 2009-09-13 at 13:41:07ID: 25321639

StomIt Solutions -> No it cannot be repeated

by: PjotterRPosted on 2009-09-21 at 02:03:05ID: 25381191

Does anybody have any ideas?

by: Rsulliv1Posted on 2009-11-05 at 16:45:09ID: 25755760

Here's some info on the upcoming standard: http://www.css3.info/preview/background-size/
that might help on some browsers, but it doesn't appear to be a Microsoft-enabled solution at the moment.

The following blog posts shows an example of how to emulate the behavior you're after.
http://www.markschenk.com/cssexp/background/index.html

Here is a more manual method to solve the same issue:
http://bytes.com/topic/javascript/answers/91946-switching-background-image-according-resolution

The above shows how to write up a javascript function that will execute and dynamically select the proper image based on resolution. This depends on you having multiple background images; one for each resolution for which you want to account.

Here's another option that appears to have solved the issue for some people:
http://stackoverflow.com/questions/376253/stretch-and-scale-css-background/388817#388817

Let me know if there's anything specific about these that doesn't work for you!

by: j-b-tPosted on 2009-11-05 at 18:01:06ID: 25756085

Along teh same lines as Rsulliv1 - I beleive you could do this by having a different stylesheet for each resolution e.g template_1024.css - template_600.css etc.

Each could be the same except for background image. In the index.php file of your template you could then use javascript to detect teh browser resolution and perhaps a switch / or other conditional statment to select template no.css. If your template has several css files just make sure the file called is teh one that imports teh other files.

Hope this helps:

THis link may be useful to you :
http://www.sightspecific.com/~mosh/Tricks/ScreenRes/

by: Rsulliv1Posted on 2009-11-05 at 18:21:30ID: 25756157

jbt's comment reminded me of one other option:

If you want to go real technical, you could use imagemagick and php to dynamically render a version of your background pic based on the availableWidth on the browser, but that would require a bit of work to ensure thread-safety for multi-users, caching, a good response time, etc... I don't know if there's something out there that already encapsulates this functionality, but I think it's technically possible.

I think it would be overkill, but we're trying to be thorough for you :)

by: PjotterRPosted on 2010-03-29 at 05:55:39ID: 31611089

The links gave me enough information to solve the problem

Question

how to scale a background image automatically in joomla

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

joomla

scale

background

Joomla

Cascading Style Sheets (CSS)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press