Question

I’m having trouble with realizing how I would code a div’s background which requires a dynamic background. The div has a specific height but the width is the size of the browser.

I have a div which has a default repeat-all background pattern but changes if a button is hovered over or clicked on. The backgrounds do NOT repeat so I’m trying to figure out how to have them expand/resize based on the browser size which is the div size.

Here is what it should look like… Default: https://i.stack.imgur.com/Ogxrh.png Category 1 (Hover/Pressed): https://i.stack.imgur.com/260i8.png

Notice how default is repeating pattern and the other is a full-bg.

My code is currently:

$("#select_all").click(function(e) {
        $("#selected-game").removeClass('game_bg_minecraft').removeClass('game_bg_terraria').removeClass('game_bg_dayz');
     });
     $("#select_minecraft").click(function(e) {
        $("#selected-game").addClass('game_bg_minecraft').removeClass('game_bg_terraria').removeClass('game_bg_dayz');
     });
     $("#select_terraria").click(function(e) {
        $("#selected-game").addClass('game_bg_terraria');
     });
     $("#select_dayz").click(function(e) {
        $("#selected-game").addClass('game_bg_dayz');
     });

HTML Code

<div id="selected-game">
<div class="row">
    <div class="ten columns">
    <h1>TopTitle</h1>
        <div>
        <h4>Selected Game Title</h4>
        </div>
    </div>
</div>
</div>
<div id="game-selection">   
    <div class="select_game">
        <button id="select_all" class="demo-change btn btn-info" style="display: inline-block;">Default</button>
        <button id="select_minecraft" class="demo-change btn btn-info" style="display: inline-block;">Category1</button>
        <button id="select_terraria" class="demo-change btn btn-info" style="display: inline-block;">Category2</button>
        <button id="select_dayz" class="demo-change btn btn-info" style="display: inline-block;">Category3</button>
    </div>
    <div class="game-options">
        More stuff here, yo!
    </div>
</div>

But the problem here is that for every new button i add, i need to remove all other classes or risk the new background not showing up. I’m also lost as to how to have one background repeat while having the other dynamically resize based on div’s width.

I’m also not sure how to cleanly and optimally change for both click and hover while keeping js code to a minimum.

Answer 1

I would make general background class that repeats but centers:

.game-bg{
    background: url("default-bg.jpg) repeat center;
}

and just change the background property:

$("#select_item1").click(function(e) {
    $("#selected-game").css('background-image', 'url("myimage.jpg")');
});

Just make sure you use images that are large enough to display nicely on big monitors. Because the background image centers it expands and crops on the left and right side.

Another way to go would be to look at the background-size property (but this isn’t supported in all browsers):

http://www.css3.info/preview/background-size/

Specificly auto or cover.

Follow up question:

If you use jQuery to remove the CSS again it should convert back to the default .game-bg class background:

$("#selected-game").css('background-image', ''); //leave the background empty

However if you i.e. click on one of the items…. and then hover over the other items. It will revert to the default background, and not of the “active” item. If you also want that it becomes a bit more complex. Then you should add an active class to the item that is active. And on mouseout look for the item with the active class, lookup the ID and based on the ID apply the right background. I hope this makes any sense 🙂