Background Image Not Displaying in Chrome Browser

Background image not displaying in chrome browser

This is a pretty funny issue which I only figured out when opening your page in Chrome's incognito mode: Your background image is being blocked by AdBlock.

Also, for rendering purposes it's better practice to stick style elements in your page's head.

Background Image doesn't display in Chrome

The Class ad-title is conflicting with Chrome AdBlock extension classes. You need to be disable the extension or you can try in incognito mode.

I just have changed the name ad-title to title and it works perfectly.

Here is the solution:

https://codepen.io/ydhiman20/pen/GadWZo

css background images are not showing in chrome but working on atom live server

Instead of

background-image:url('../images/img1.jpeg');

Use: background-image:url('images/img1.jpeg');

Your CSS file is in \Documents\myapp\style.css and image file inside \Documents\myapp\images, From CSS file you do not have to go back to parent folder using ../

CSS-defined background image doesn't display in Chrome

You can use src attribute of input[type=image]

<input type="image" src="../Images/Refresh-icon.png" />

Clarification for the questions from comments:

For input[type=image] and img tags in chrome, if there is no src attribute or invalid src attribute, browser shows the icon of broken image which is not background, that's why you cant override it from css background.

However img tag is not showing the icon when there is no src attribute at all, it is showing only when the value of src is invalid.

But for input[type=image] it is showing up even when there is no src attribute, this behavior is different for img and input[type=image].

I don't know the exact reason behind that, but my guess is that may be src is optional for img but not for input[type=image].

As per the problem input[type=submit] not working, if you can provide the new code you have tried we should be able to help you with that.

This is a small experiment that shows how it works

<p><strong>input type="image"</strong></p>
<p>Without src</p><input type="image" style="display:inline-block;width:  40px;height: 40px;background: #000;"/>
<p>With src</p><input type="image" style="display:inline-block;width:  40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png"/>
<br /><br /><p><strong>input type="submit"</strong></p><p>With background</p><input type="submit" style="display:inline-block;width:  40px;height: 40px;background: #000;"/>
<br /><br /><p><strong>img</strong></p>
<p>Without src</p><img style="display:inline-block;width:  40px;height: 40px;background: #000;"/>
<p>With empty src</p><img style="display:inline-block;width:  40px;height: 40px;background: #000;" src />
<p>With invalid src</p><img style="display:inline-block;width:  40px;height: 40px;background: #000;" src="//avcs" />
<p>With valid src</p><img style="display:inline-block;width:  40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png" />

CSS Background image is only working in Chrome and no other browser

Look at your css file. You're path is CSS/styles.css which is a relative file path.

For your images, you're using /Images/image.jpg which is an absolute file path.

If you use /Images on a hosting account online, it will go to whatever your root directory is which is what you intend. If you use /Images on your local device... it will go as far back to get to the root as you can go.

So if my computer structure is:

my-computer
-desktop
--my-project
---index.html
---Images
----image.jpg
---CSS
----styles.css

/Images is going all the way back to the my-computer folder and looking for it there. It wont find it there though.

What you want to do is ../Images to move back one level outside of the css folder and look for the images folder.