Use CSS to show two div's with background image over a containing div


Tags: css,css3,html

Problem :

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.



Solution :

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);

    CSS Howto..

    How to make CSS visible only for Opera

    How to id dom table so I can position it on page?

    how to make div fixed and ot move upon window resize

    How to delete white space between two div element when they display as inline-block [duplicate]

    how to move canvas along with a centered canvas

    CSS Select element, how to disappear the arrow?

    How to make layout like notes in Google Keep using CSS?

    How can I make this HTML5 canvas progress bar fill from the bottom up instead of the top down?

    CSS Syntax - How to interpret this?

    How to hide elements in mobile devices? CSS

    How to hide the div on click through animation css

    How to hide the “body” statement in css and javascript

    How to line up images in a horizontal row with CSS?

    how can I add styles of structure to jquery plugin

    how do you change the color of nav bar

    How to reference an embedded image from CSS?

    How do you organize your template structure in CodeIgniter?

    How to create a proper class structure?

    css div and span display differently in browsers. How to unify?

    How to avoid css overlapping?

    jQuery: accordion-LIKE format. how to prevent div from collapsing if one of the checkboxes is checked

    How to create a full width background image with a variable height depending on content?

    How does one customize the appearance of jquery.perfect-scrollbar?

    How to create an HTML CSS Page with Header, Footer and Content

    How to show borders of th elements with gradient fills in IE9?

    How to make more divs appear when hovering over one div?

    How to use different CSS opacity in a nested div? [duplicate]

    How to wrap text in a element in IE

    How to get angled corner like this in CSS, it's not round?

    Is there any tutorial to teach me how to design the sidebar like this website? [closed]