My Background image doesn't show up and is not inspected in the browser [closed]


Tags: javascript,html,css

Problem :

I used mozila and I try to "inspect element" to see if my background image is there. The inspect element even doesn't show the css style mark up like background-image: blah blah; at all.

I am very sure that I have written the code correctly:

       background-image: url ('social-icon/button.png');

Some discussion out there said that it may be caused of "javascript" and adviced to disable the javascript, but I don't know how to do that. Eventhough it is true that the problem is the javascript and it means that I can't use Javascript in my html file, it will be worse.

I am just confused?

EDITED :p

LOL, THE PROBLEM IS BECAUSE I HAVE A SPACE BETWEEN URL AND THE SOURCE. IT SHOULD BE LIKE

        url{there is no space here}('social-icon/button.png');

It's so funny how we all can't see a little problem when our focus is to the another point of the question. :D :D :D



Solution :

Is your css file correctly linked in the .html? I understand it as you have your img as a background-image in css?

<link rel="stylesheet" href="yourCss.css">

It's a long shot, but try with removing the image part,

background: url('social-icon/button.png');

    CSS Howto..

    How slow is * css selector for mobile browsers?

    Devtools audit shows unwanted/injected css rules

    JQuery function to show element dependent on the value of hidden HTML input element

    How to style a XUL textbox with CSS :focus

    How do I put a border around a tr tag?

    In GWT 2.0 CssResource, how I can turn off obfuscation for all classes in just one CssResource

    How to specify image paths in CSS files?

    How to change CSS to the same class but another input name

    CSS, how to add picture in the corner of every columns

    How To Put Values Dynamically

    How to add a style only to certain elements of a list via CSS

    How to add a table inside a div with its CSS working

    How to add CSS AnimationEnd event handler to GWT widget?

    How do I join my list and div using css?

    how to override user agent CSS

    In Jquery how to add Css?

    how to set break for print page(div) using css?

    Show div only on Homepage using only JS & CSS

    How can I style a disabled button in a Windows 8 JavaScript app?

    How to do mobile devices-friendly CSS for both desktop and mobile devices

    How to make a 'ease out' on focus loss in CSS

    How to have the nav and footer more than 1000px?

    How to visually position image before heading element

    CSS form with side by side fields…how to align the labels and fields vertically?

    How or where to add javascript settimeout function to CSS vertical drop down menu

    HTML/CSS: How to make the sidebar and content follow each other

    How to find number of style classes defined in a CSS file

    How do I get a fixed positioned footer, fixed width right column, left column for the rest using CSS lay-out?

    How to vertically align in the middle a clickable image (between ) inside a div in a responsive manner?

    Use like this <div class="accounts"> <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a> </div> <div class="accounts"> <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a> </div> ...
    Read more

    how to make animate.css(plugin) work instantly on live site load?