The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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.

    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" "">


    Alternate Background Images

    Option 1
    Option 2
    Option 3

    # 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="//"></script>

    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 :).


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




    $(document).ready(function() {
    $('#click-me').live('click', function(e) {

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed