1

I am working on this site. It is Joomla-based so I had to pick up some new things while trying to convert it. I finally was able to get it to look the way I want but I have some problems as the main background (an image module) is 2100px wide and looks great on wide resolutions, but it's huge on smaller ones.

Is there a way to code something in the HTML (or otherwise) that will say if the resolution is this then make the module display this image, etc.?

Stephane Rolland
  • 38,876
  • 35
  • 121
  • 169
dreday
  • 95
  • 1
  • 9

2 Answers2

1

I don't know about loading in a different module, but you can use CSS media queries to load in a new background image for specific viewport dimensions:

@media only screen and (min-width:0px) and (max-width:2099px)
{
    .my_image { background-image:MY_NEW_IMAGE; }
}
Lowkase
  • 5,631
  • 2
  • 30
  • 48
  • would I just paste this as is in the body and change the widths for various classes and then put the image link? – dreday Mar 12 '13 at 17:04
  • what does the @media do? – dreday Mar 12 '13 at 17:05
  • @media is a media query http://css-tricks.com/css-media-queries/ – DickieBoy Mar 12 '13 at 17:06
  • When the width of the browser's viewport is within 0px and 2099px then the CSS inside the media tag will fire. If the width of the viewport is outside of those values then the default CSS will fire. – Lowkase Mar 12 '13 at 17:06
  • You should have a DIV or another HTML element that has been styled with the background image. All you need to do is select that HTML element inside the media tag and assign a new, smaller background image. – Lowkase Mar 12 '13 at 17:07
  • @user2162042 You won't put this in the `

    `. It goes inside a CSS declaration in the `

    `.

     – Aaron Blenkush Mar 12 '13 at 17:08
  • Okay I am just trying to differentiate because of JOOMLA if it should go in the HTML for that module, or the HTML for the entire site if that makes sense... – dreday Mar 12 '13 at 17:20
1

Try

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Demo

From: Perfect Full Page Background Image, css3 technique.

lngs
  • 690
  • 1
  • 8
  • 17
  • I just copy this and put it in my template.css file and it will do everything? Even though the module has its own image file dropped in... – dreday Mar 12 '13 at 18:01
  • I dont know Joomla but the idea is use this css to set the style of your current background image. – lngs Mar 12 '13 at 18:17