I have a background image with background-attachment: fixed, which works fine in all browsers in localhost but does not show in chrome on the server.
.bg-contact{
background-image: url(../images/bg-contact.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
background-size: cover;
}
Please help
Try clearing the cache on that Chrome.
There's also an extraneous { which maybe Chrome is sensitive to.
Couple more things: try adding ' ' as in ('../images/bg-contact.jpg'), and check AdBlock in Chrome.
Check the file extensions for the background, remember that capital letters make difference for example on your PC JPG and jpg is the same thing but on the server those are completely 2 different pictures.
Also include link to the website or add the code of it if you have problems with it.
-----New Idea For Answer------
You have:
background-image:url(../images/bg-contact.jpg);
Make it with a full path to the file
Use Chrome Developer Tools from your Chrome Browser to get to inspect the element where picture should be displayed, then check if the value of background-image is:
-Not crossed: then is should be working and it is not a problem with a code but with the browser.
-It is crossed: Then your background property is not working, you can add !important to it to get a quick fix but you should find the reason behind it and fix it asap.
Turned to be path issue, especially for Wordpress. When one is setting
background-image: url('bg_1.jpg');
in his themes/myTheme Folder, the browser is loading from http://127.0.0.1:80/wordpress/bg_1.jpg
, while the file is actualy in C:\xampp\htdocs\wordpress\wp-content\themes\myTheme
That is why one should say:
background-image: url('res/bg_1.jpg');
and make new folder wordpress/res in which bg_1.jpg will reside.
Related
I am currently working on a website and everything works and functions fine except the background image on mobile. I have quite literally tried everything and it will not show on mobile even though it shows just fine on my laptop. The phone I have is an iPhone 6s and it just doesn't want to show. I have used the same CSS code in other projects and it works just fine but it won't currently.
I have done some testing and the issue seems to be the background-position: cover. But what is a way around this without making the image look bad. Also when I click the mobile nav button to open the menu... you can see the image show in the back which is extremely strange...
Does anybody have any possible solutions to this? It's extremely frustrating.
Here is the link to the site: http://mujomusic.net/WDV351/Konstrukt/index.php
and the code:
height: 100vh;
background-image: url('images/main.jpg');
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
Would u give a screenshot ,because it is working perfectly fine on mine.
Could be cache Issue.
I have a background image (background: url('...svg') no-repeat;) which I force into the right size with background-size: 100% 100%;. This creates the desired effect and seemed to work great, until I looked at the page with Safari. Safari seems to ignore my background-size settings and use background-size: contain; instead (it centers the image though, so not exactly contain).
I found an other post on Stack Overflow which said that one has to use -webkit-background-size for Safari. That doesn't work either though.
You can see what I mean in this jsfiddle. In Safari both divs will look the same.
Does anyone know how I get this working in Safari?
This seems to be an issue with your Data URI. If you replace the url() link to a normal image link, the sizing on Safari should work like expected. The sizing will also work if you use a different data type in the URI (something besides an SVG).
Cheers,
Jeffrey
I am trying to load background image to a page using Dreamweaver. It shows in IE and Edge but not Chrome or Mozilla. I have tried moving the photo's location (file path) and tried in both straight HTML and CSS with the same result. I cannot find another way to write the code or think of one (being very new to this) so that it will show in all browsers. This is the CSS code:
background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')
set in the body brackets;
and html:
<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">
Everywhere I look I find examples with ellipsis points, like url(...website.com/greanleaf.jpg) and the dots totally confuse me. I think perhaps I need help with how file paths work.
This is due to the implementation of the body and html tags in Firefox and Chrome browsers. the body and HTML tags are only as big as the HTML content of them. where as Edge and IE the HTML and Body are auto sized to the size of the view port.
Add this to your CSS
body, html{
min-height:100%;
min-width:100%;
}
Ok , so if your code is correct and the image it's shown in IE and edge try to
refresh your browser but not normally with this command : Control + Shift + R
so that you're sure to be running the latest and greatest version of what that web
site's serving.
First, you'll need to be sure that the browser is correctly locating the image.
A good way to be sure is looking at Chrome's network tab. Hit F12 in Chrome to reveal Developer Tools. Click the Network tab and then refresh the browser. You will receive a list of resources that have/have not loaded. If your image is listed in red, then it failed to load. Your problem will be an incorrect path.
This is a good resource for understanding relative file paths.
https://css-tricks.com/quick-reminder-about-file-paths/
However, if it did load successfully, the image isn't showing for another reason. Without seeing all of your code, I can only make a guess. Is the container that your image is in empty? Without content or a specified height, the background image won't show in some browsers.
Every now and then, the background image on my website appears randomly on the sides of the page as seen here: http://i.imgur.com/0HFJF9w.png
It may happen to you too, but if it does, a refresh clears it: http://centralsirescoop.com/proven-sires/harrison/
The couple of lines of code regarding the background (found in body) is as follows:
background-color: #c8dbfb;
background-image: url(images/clouds.jpg), url(images/grass.jpg);
background-repeat: repeat-x, repeat-x;
background-position: 0% 0%, 0% 100%;
Thank you.
EDIT:
Browsing on Window 7, Chrome browser v28
EDIT2:
Error does not seem to occur in Internet Explorer 10
There are some rendering issues with Chrome that I know of, and have experienced multiple times myself. Surprisingly, my searches have not revealed much info on this... But it is definitely there. Even on my Linux system, as well as Windows system.
Try in Firefox and Opera too if you can. I suspect it is Chrome.
I must be missing something completely obvious here, but can't find anything online to tell me otherwise.
I'm trying to pull a .png into a page using:
background:url(img/runner1.png) no-repeat;
I know the path is correct because doing the same with a jpg works:
background:url(img/header.jpg) no-repeat;
It does seem to work in Safari, but not in Chrome or Firefox.
Am I missing something here?
EDIT -
I am using:
#runner1{
background:url(img/runner1.png) no-repeat;
float: left;
border: 1px solid #FFF;
width: 195px;
height: 205px;
}
for the following element:
<div id="runner1"></div>
The page is just running locally from my desktop (so no server involved).
As mentioned previously the paths aren't the problem because a jpg from the same directory works.
Firebug says:
runner1.png
GET
Success
image/png
index.html:201
0B
8ms
But I can't see the preview or response in Firebug.
Also accessing the file directly returns the same result.
Solved!
It would appear that saving PNGs with Photoshop creates a PNG which isn't compatible with chrome or firefox. So instead, I opened the file with Fireworks, re-saved and the pngs are working.
My guess is that you're missing /. Try absolute url path.
I had the same problem with .png files saved from IrfanView: they would not be displayed as a background image before I unchecked the "Save Transparent Color" option in PNG save options. So I guess PNG should be saved without transparent colors to be displayed as background images.