Grow your CSS skills. Land your dream job.

Resizable BG plus time sensitive CSS

  • # August 17, 2010 at 4:13 pm

    Hi there, guys!
    I’ve got a tricky thing here to solve. The thing is, that I’ve got a bg, which has to be re-sizable to browser window.
    I’ve found here this post http://css-tricks.com/perfect-full-page … und-image/ which was really helpful to figure out, how to do it without Java. But the tricky part is that I want to build the time sensitive CSS, so that night, day, sunrise etc bg would nicely change with daytime. Plus the change of whole layout.
    With the help of small php I try to actually achieve that change of bg.

    <?php
    $time = date(‘G’);
    $sunrise = date_sunrise(time(), SUNFUNCS_RET_DOUBLE);
    $sunset = date_sunset(time(), SUNFUNCS_RET_DOUBLE) + 1;
    if($time >= $sunrise && $time < $sunrise + 2) $style3 = ‘sunrise’;
    elseif($time >= $sunrise + 2 && $time < $sunset) $style3 = ‘day’;
    elseif($time >= $sunset && $time < $sunset + 2) $style3 = ‘sunset’;
    else $style3 = ‘night’;
    ?>

    plus stylesheets with different scenes. But it just won’t work together :( The bg is all the time destroyed. Is there is smb here who could help me? Am desperate! :(

    # August 17, 2010 at 6:48 pm

    This isn’t tested, but you might be able to do something like this:

    Code:
    $hour = date(‘H’);

    if ($hour >= 6 && <=9) {
    echo(‘<link rel="stylesheet" href="sunrise.css" type="text/css" media="screen, projection" />’);
    } elseif ($hour > 9 && < 20) {
    echo(‘<link rel="stylesheet" href="day.css" type="text/css" media="screen, projection" />’);
    } elseif ($hour >=20 && <=21) {
    echo(‘<link rel="stylesheet" href="sunset.css" type="text/css" media="screen, projection" />’);
    } else {
    echo(‘<link rel="stylesheet" href="night.css" type="text/css" media="screen, projection" />’);
    }

    I’m not very proficient in PHP, so hopefully somebody can clean that one up for me.

    # August 18, 2010 at 2:08 am

    Thanx! At least some answer. ;) But the question is how do I get this to work with resizable bg?
    Because the problem is that whatever I looked through resizable img is in body. How do I get control this? :P

    # August 18, 2010 at 2:41 pm

    You can control the body background via CSS. I’m not sure what you’re asking for here.

    # August 18, 2010 at 4:09 pm

    Hi! Thanks for reply once again! :)
    I know that I can control bg img through CSS, but I really want to have resizable img like here
    http://css-tricks.com/perfect-full-page … und-image/
    or like here
    http://buildinternet.com/live/supersized/
    no matter what browsers measurements are, it stays ratio. And as if you can see in both cases bg img is in the body. In first case inside of table, in other case – as the link.
    And what am struggling is how to actually put there some div id or whatever, so the img would be in external CSS for php. There…
    Whatever I have done with Jquery it didn’t work at all, with table case it did work somehow, just the img was completely destroyed :(

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".