How to make an item background visible on overflow?


Tags: html,css

Problem :

I have a small dropdown selection inside overflow box. Problem is I cannot make links background fill full width. Just try to scroll:

.outer {
    width: 100px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}
.inner a {
    background: none #ccc;
    display: inline-block;
    white-space: nowrap;
}
.inner.block a {
    display: block;
}
<p>inline-block:</p>
<div class="outer">
    <div class="inner"><a href="#">Some link title in here.</a></div>
    <div class="inner"><a href="#">Some much longer link title in here.</a></div>
</div>
<p>block:</p>
<div class="outer">
    <div class="inner block"><a href="#">Some link title in here.</a></div>
    <div class="inner block"><a href="#">Some much longer link title in here.</a></div>
</div>

Also on Playground.

I can modify CSS and HTML any way, the container has position: absolute. Also, the background is an image repeating, not a solid color.

How to make the background behind the text to extend to the edge?



Solution :

In my example, links are clickabe in full width, and you can add repeateable background easly.

<div class="outer">
    <div class="background">
        <div class="inner"><a href="#">Some link title in here.</a></div>
        <div class="inner"><a href="#">Some much longer link title in here.</a></div>
    </div>
</div>

-

.outer {
    width: 100px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}

.outer a{
    display: block;
    background: url(http://nonessentials.org/wp-content/uploads/2014/01/dots-small-pattern.png);
    background-size:cover;
}

.background {
    background: none #ccc;
    display: inline-block;
    white-space: nowrap;
}

JsFiddle


    CSS Howto..

    How can I hide a div completely from HTML DOM?

    How to make iframe use all height available to it

    How to maintain the background image until end of the page

    How to select an html element that has two class names?

    How to properly link CSS files with PHP footer and header

    How can I create a borderless textbox in Google Chrome using CSS?

    How to resize in
    with float:left?

    How to animate to position fixed?

    How to style the first row of every tr group?

    How to prevent html div from expanding when text size is changed

    Is this how CSS LESS and SimpLESS work? [closed]

    How to Center CSS Tabs

    How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript) [duplicate]

    How to float div up?

    Show an image from b&w to color as if it were loading (left to right)

    how to overwrite inline styles in print css?

    How to Detect css by iPhone/iPad

    How to improve the performance of this CSS animation?

    How to arrange images at middle of vertical using css?

    How to add space between border line and menu item

    CSS - how to apply styles to first elements in a static generated list

    How to make a text slideshow using CSS/HTML/JAVA

    How is Facebook's website front-end and it's right sidebar designed?

    How to make a titled box with css?

    How to resize the clockpicker?

    How to manage custom CSS?

    How to generate unique css selector for DOM element?

    How can I create a footer/toolbar in an iPhone web app?

    How to make css background-image a fluid image work in IE

    How do I use a different image for each JQuery UI Slider handle