Grow your CSS skills. Land your dream job.

CSS background change within a div

  • # November 27, 2012 at 11:46 pm

    Hello everyone, I’m new here and is a beginner to CSS/jQuery.
    I’m searching for way to change the background image of a div. When I click on a link on the navigation that will link within the same file (am I making sense?), and with a cross fade transition.

    This is the website I’m working on. The pages are fading in and changes but the background image remain fixed. I want to change the background-image in the blackish background (with words), not the sunrise background.

    http://entwurvian.net/wip/maxivision/index.html
    http://entwurvian.net/wip/maxivision/style.css

    I tried implementing this script which I found online but it didn’t seem to work.
    Is it because it conflicts with some codes in my files?

    Thanks in advanced!

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Sometext
    Alternate Background Images -

    Option 1
    Option 2
    Option 3
    Default


    otc
    # November 28, 2012 at 10:26 pm

    Hello fujihime,

    This is very simple :D. Your website is not loading for me however here is an example for you.

    First thing you need to do if you havn’t done so already is include the jquery script to your page.
    add this script at the bottom of the html before the body tag closes

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </body>

    ok now imagine the div we click on has an id=”click-me”.
    All we have to do is tell jquery to change the css when the user clicks on the div, simple, let’s get to it :).

    HTML:

    <div id="click-me"><div>

    CSS:

    #click-me{
    background-image:url(first-image.jpg);
    }

    jQuery:

    $(document).ready(function() {
    $('#click-me').live('click', function(e) {
    $(this).css('background-image','url(second-image.jpg)');
    });)
    });

    Let me translate this into english:

    When the document is ready (HTML is loaded) if the user clicks on id click-me then change my CSS ( $(this) ) to the following.

    Voila easy, hope this makes coding fun.

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

You must be logged in to reply to this topic.

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