CSS simple make my background 100% (autofit browser)?

Question

I have some problem with my CSS :

My coding so far :

#leftcolumn {
    background: url('SlicingImage/action_bar.jpg');
    background-repeat:none;
    float:left;
    z-index: -1;
}

HTML:

<div id="containerleft">
        <div id="leftcolumn"  >
            <p><img src="SlicingImage/alacards_logo.png"/></p>
            <ul>
            <li class="separator"></li>            
            <li class="buttons">home</li>
            <li class="separator"></li>
            <li class= "buttons">users</li>
            <li class="separator"></li>
            <li class= "buttons">tutorial</li>
            <li class="separator"></li>
            <li class= "buttons">issuers</li>
            <li class="separator"></li>
            <li class= "buttons">merchants</li>
            <li class="separator"></li>
            <li class= "buttons">partners</li>
            <li class="separator"></li>
            <li class= "buttons">high light</li>
            <li class="separator"></li>
            <li class= "buttons">news</li>
            <li class="separator"></li>
            <li class= "buttons">contact us</li>
            <li class="separator"></li>
            <li class="bottom"></li>     
            </ul>
        </div>
       </div>

If I run this code, result : BG but I want that small gray area covered like this

If I delete

background: url('SlicingImage/action_bar.jpg');

become like BG2

I tried add that class="bottom", but not like what I want (must define height manually)

I don't realy understand your goal. Where did you add the class="bottom" ? — web-tiki, Nov 29 '13 at 09:34
I tried to edit his code for that but it seems he refused my edit :( — web-tiki, Nov 29 '13 at 09:41
@haukurhaf I must add UL tag? and where to put the pic then? — Aldin, Nov 29 '13 at 09:46
oh ok, sorry didn't see. do you have css code for that class? For the UL tag just accept my edit — web-tiki, Nov 29 '13 at 09:48

score 0 · Answer 1 · answered Nov 29 '13 at 09:29

0

Your background it is not showing because the z-index. Try to put a higher one

answered Nov 29 '13 at 09:29

Rafa Romero

2,667
5
25
51

I tried that z-index but still the same, and I tried put the pic at containerLeft and still no effect – Aldin Nov 29 '13 at 09:33

score 0 · Answer 2 · answered Nov 29 '13 at 09:31

0

Try giving width to your ul and margin:auto;

ul {
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 750px;
}

answered Nov 29 '13 at 09:31

Kishori

1,065
6
12

What didn't work? giving width and margin:auto; to ul – Kishori Nov 29 '13 at 11:33

score 0 · Answer 3 · answered Nov 29 '13 at 10:04

0

Works for me:

#leftcolumn {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTFMUprTNP6nK2r2QxbZ-ls7YlgiVenNuwCBkXwX-keeE96iOradptCHPLZ);
    background-repeat:none;
    float:left;
    z-index: -1;
}

It must be something odd in your button and/or separator classes.

NOTE: I used some random pink background image that I found with Google image search.

answered Nov 29 '13 at 10:04

Domi

22,151
15
92
122

I tried too and it works in jsfiddle but at my browser still the same if I run my code.. – Aldin Nov 29 '13 at 10:18
Sounds like you should take a look at this: [code works at JSFiddle, but not on my site](http://stackoverflow.com/questions/12942633/code-works-at-jsfiddle-but-not-on-my-site). – Domi Nov 29 '13 at 10:24

score 0 · Answer 4 · answered Nov 29 '13 at 15:24

I found the solution: After I put </p> after </ul>, will give me the result I want

<div id="containerleft">
        <div id="leftcolumn"  >
            <p><img src="SlicingImage/alacards_logo.png"/>
            <ul>
            <li class="separator"></li>            
            <li class="buttons">home</li>
            <li class="separator"></li>
            <li class= "buttons">users</li>
            <li class="separator"></li>
            <li class= "buttons">tutorial</li>
            <li class="separator"></li>
            <li class= "buttons">issuers</li>
            <li class="separator"></li>
            <li class= "buttons">merchants</li>
            <li class="separator"></li>
            <li class= "buttons">partners</li>
            <li class="separator"></li>
            <li class= "buttons">high light</li>
            <li class="separator"></li>
            <li class= "buttons">news</li>
            <li class="separator"></li>
            <li class= "buttons">contact us</li>
            <li class="separator"></li>
            <li class="bottom"></li>     
            </ul>
            </p>
        </div>
       </div>

CSS simple make my background 100% (autofit browser)?

4 Answers4