why this img won't display?

[r_tist]

Hi,

Having a difficult time figuring out why this does not display on my site when I test. The images folder is housed within the root of site (first level). Strangely, the same code works & displays on a completely different site. The space where button is still links outbound, and when I play with the opacity, I can see a black box over it:

.button  {

    background: rgba(0, 0, 0, 0) url("/images/button.png");

    background-repeat: no-repeat;

    background-position-y:center;

    background-position-x:center;

    background-size: contain !important;

    padding: 0 !important;

    position: relative;

    top:9px;

}

.button:hover {

   opacity: 0.8;

   background: rgba(0, 0, 0, 0) url("/images/button.png") !important;

   background-size: contain !important;

   background-repeat: no-repeat !important;

    background-position-y:center !important;

    background-position-x:center !important;

}

.social ul {

    float: left;

}

.social {

    padding: 33px 0 0 1px;

    margin-left: -20px;

}

.social a {

    background-size: contain;

    display: inline-block;

    height: 40px;

    width: 40px;

}

-------------------------------------------------------

<div class="col-md-3 col-xs-12 ">

    <div class="social">

          <div id="socialIcons">

<a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

<a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>

<a href="https://twitter.com" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>

<a href="https://plus.google.com" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a>

<a href="https://www.youtube.com" target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i></a>

<a href="https://www.pinterest.com" target="_blank"><i class="fa fa-pinterest" aria-hidden="true"></i></a>

<a class="button" target="_blank" href="http://www.custom-button.com/"></a>

         </div>

    </div>

</div>

Anything glaringly wrong with this? Thank you for your time!

[Nancy OShea]

You can't see the button?  Where is your stylesheet in relation to the HTML document?

Nancy

[r_tist]

the social media icons I can see as they are referencing Font Awesome. Just my custom graphic for a button is not visible.

The styles are within the single page head tags of the site... not in an external CSS file (not till I wrap things up; then I'll pull them into an external .css)

[pziecina]

Is the file path for the image exactly the same as for the page in which the code works?

[osgood_ · Accepted solution]

background: rgba(0, 0, 0, 0) url("/images/button.png");

If your page is at the same level as the images folder within your site folder you dont need the leading / infront of your images folder:

background: rgba(0, 0, 0, 0) url("images/button.png");

[r_tist]

Aww! That always gets me! I had tried both with the fwd slash and also the ../  - had not tried simply removing it!

This always trips me up. It is a little confusing because the index file is not included within the images folder; I am thinking the '/' symbolizes to 'look into something'.  Is there a better way to read what the slash or lack of a slash in ones mind should be to better recall? Some sort of mnemonic device?

Thank you!

[osgood_]

r_tist  wrote

Aww! That always gets me! I had tried both with the fwd slash and also the ../  - had not tried simply removing it!

This always trips me up. It is a little confusing because the index file is not included within the images folder; I am thinking the '/' symbolizes to 'look into something'.  Is there a better way to read what the slash or lack of a slash in ones mind should be to better recall? Some sort of mnemonic device?

Thank you!

Dont concern yourself too much about it, occasionally it trips me up too! But because I code so much I can usually get to the solution pretty quickly, no one is perfect and we all make mistakes.

If it happens again and you are struggling to remember just insert the image into DW as a non-background image and let it create the path. You can then see what the path for the background image should be..

[Jon Fritz]

/ = Root Relative, it adds the entire web address (or drive location if used locally) to the remainder of the link.

     The browser will change /link.html to www.yoursite.com/link.html for example.

../ = Document Relative, it means move up one directory from the location of the current document.

     For example...

index.html

     links

          file.html

     folder2

          page2.html

In the above directory structure, a link on "file.html" that brings you to "page2.html" would look like "../folder2/page2.html". You can look at that link as 3 directions given to the browser...

../ = move up one directory from the current document (file.html), out of the links folder

folder2/ = move into this directory

page2.html = find this page