Question

How can I use css to show two div’s with background image over a containing div with a color gradient for its background image?
I am attempting to do this with an asp.net page, and the html generated looks like this:

<div id="TopContainer>
    <div id="logos">
        <div id="logoOne" class="ImgContainer"></div>
        <div id="logoTwo" class="ImgContainerWide"><div>
    </div>
</div>

And the relevant css look like this:

/********************styles for bar across master page-logos,img containers etc.     ********************/
#TopContainer
{
    margin:0px;
    padding:0px;
    border-radius:15px;
}

#logos
{
    width:1024px;
    height:100px;
    border-radius:15px;
    color: -moz-linear-gradient(bottom, #297381, #FFFFFF);
    color: -ms-linear-gradient(bottom, #297381, #FFFFFF);
    color: -webkit-linear-gradient(bottom, #297381,#FFFFFF);
    background:-moz-linear-gradient(bottom, #297381,#FFFFFF);
    background:-ms-linear-gradient(bottom, #297381,#FFFFFF);
    background:-webkit-linear-gradient(bottom, #297381,#FFFFFF);

}

.ImgContainer
{
    background-image:url(~/images/company-logo.jpg);
    width:250px;
    opacity:0.55;
    border-radius:15px;
}

.ImgContainerWide
{
    background-image:url(~/images/company-logo.jpg);
    width:450px;
    opacity:0.55;
    border-radius:15px;
}

For some reason the div’s with image background’s don’t seem to be showing up at all,because when I use Chrome developer tools, and make the “logos” div transparent, the two image container’s still aren’t visible. Thank you in advance for the help.

Answer 1

Most likely it’s not working because ~ only works in asp.net server controls (server side), not in the client-side CSS. If it’s up one directory from your css use this instead

background-image:url(../images/company-logo.jpg); 

Typically ~ gets you to the root application, so if you want to go to the root directory, use simply a /:

background-image:url(/images/company-logo.jpg);

And lastly, depending on your situation, you can also use absolute paths (instead of the relative paths above), e.g.:

background-image:url(http://www.yourdomain.com/images/company-logo.jpg);