Forums

Background pic question

Permalink
Hi all

I got a question about my background pic:

http://textcube.c-ex-c.org

I'm using 1920x1200 Pics, so even on a FullHD monitor, you'd have a nice background. I want to use pics, since it's part of the design.

Now, as you can see I used expandable blocks - also part of my design idea. If you just expand on, it's no problem, the main window is still within the picture background. But if you expand two or more blocks - well, the pic ends, and the main windows opens up into the white background with no pic.

How do I fix that? I was thinking about using larger pics - but it would only fix the problem partially. Even then, if you open all six expandable blocks, you'd eventually reach the end of the pic. Plus, the picture size would be huge, making the site a bitch for slower connections. I also could just repeat the background - but depending on the pic, that would look bad as well.

Is there any way to make the pic slide down with the main window, making the main content never pass the bottom part of the pic? Or are there other solutions?

thanx a bunch

RizzzO
RizzzO
 
kino replied on at Permalink Reply
kino
background: #fff url(http://www.c-ex-c.org/Testsite_textcube/themes/Transparent_theme/images/backgrounds/bg_yellowleaves2.jpg) no-repeat scroll left top;


to 

background: #fff url(http://www.c-ex-c.org/Testsite_textcube/themes/Transparent_theme/images/backgrounds/bg_yellowleaves2.jpg) scroll left top;
RizzzO replied on at Permalink Reply
RizzzO
that would just repeat the image, which would look bad, depending on the kind of image.

Is there no way to make the image move with the screen? Very few people use more than Full HD (1920x1200), so the best thing would be to just have the background image move according to wherever the screen is showing...
kino replied on at Permalink Reply
kino
etc.
using javascript.
get browser height & width.
make backgroundfilename from height & width.
RizzzO replied on at Permalink Reply
RizzzO
...how to do that.

Are you up for it? For another small donation? :-)
kino replied on at Permalink Reply
kino
add following code to
before </head>
in elements/header.php 
<script type="text/javascript">
      $(document).ready(function(){
         var h = $(window).height();
         var w = $(window).width();
//          alert(  h );
//          alert(  w );
//          alert(  $('body').css('background-image')  );
         if((w>1024) &&(h>768)){
            $('body').css('background-image','url(<?php echo $this->getThemePath()?>/images/backgroundimage-large.jpg)' );
         } else if((w>800) && (h>600 )){
            $('body').css('background-image','url(<?php echo $this->getThemePath()?>/images/backgroundimage-middle.jpg)' );
         } else {
            $('body').css('background-image','url(<?php echo $this->getThemePath()?>/images/backgroundimage-small.jpg)' );
         }
      });
Viewing 15 lines of 16 lines. View entire code block.


and preparation any size images.
RizzzO replied on at Permalink Reply
RizzzO
Edit: Well, the easy way: Fixed background. Does the trick perfectly fine.

Thanx anyways for the code above. I'll implement it later on, to make loading faster.

RizzzO