CODEWITHSUNDEEP
cssurlfirefoxgoogle-chromebackground
Tam N.
Tam N.

Reputation: 2737

CSS background url not working with Chrome

So I have Chrome v20.xxx, and I'm trying to make the images on my blog appear like that have a drop shadow, using both CSS3 and background url. It's working great with FF, but the background image isn't showing up for Chrome. My pseudo-code is as follow:

<p>
    <a>
        <span class="img_wrapper">
            <img class="with-borders">
        </span>
    </a>
</p>

Here's my CSS:

img.with-borders, img.tn { 
    margin: 5px 0 0 0;
    padding: 8px;
    background: #f1f1f1;
    border: solid #777;
    border-width: 1px 2px 2px 1px;
    box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
span.img_wrapper {
    background: url('./images/et-image-sliderleft-shadow2.png') no-repeat left bottom, url('./images/et-image-sliderright-shadow2.png') no-repeat right bottom;
    padding-bottom: 14px;
}

It seems that Chrome is limiting the view of the background image by how much the wrapper spans, whereas Firefox ignores such limit and let the inner background image "overflow" the inline element, which is exactly what I want.

Please, how do I make it work for Chrome?

Thank you.

P.S.: I can paste this on jsfiddle if you prefer.

Update: screen shot: http://i.imgur.com/ISXDr.png

Update #2: here's jsfiddle http://jsfiddle.net/gNtea/. What's weird is that it WORKS perfectly when viewing it in jsfiddle, just not on the live site. I thought it was the relative path issue, so I switched my production CSS to using absolute path, no help.

Update #3: I copied the source code of the webpage, pasted it on jsfiddle, it works. I view the page on the actual live site, it doesn't work. WTF? http://jsfiddle.net/eXYS9/

Upvotes: 0

Views: 7897

Answers (2)

Ericc Antunes
Ericc Antunes

Reputation: 19

Simply put the height of image =)

li.current-menu-item a {
background: url("../images/bg_menu.png") repeat-x;    
height: 35px;
}

Upvotes: 1

Chetan
Chetan

Reputation: 1620

span.img_wrapper { background: url('../images/et-image-sliderleft-shadow2.png') no-repeat left bottom, url('./images/et-image-sliderright-shadow2.png') no-repeat right bottom; padding-bottom: 14px; }

Use ..[two dots] instead of one for the image url

Upvotes: 0

Related Questions