I don't know why but my browser (firefox) don't show me my background-image, when i put it on html it works.
my editor : sublime text 2
i use MAMP too.
my css code :
.home{
background-image: url('bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Can you help me ? Thanks
Rémi
I think the other answers/comments are on the right track. My guess is the image is not in the right relative path to the style sheet. If your CSS file is in a folder off your web root such as http://example.com/css/site.css, then the browser is going to look for the background image at http://example.com/css/bg-img.jpg ... which would be a pretty odd place to put it.
Try putting the full path to the file in your css...something like this:
.home{
background-image: url('/images/bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
(And make sure that bg-img.jpg actually lives in /images/, of course!)
I give even odds of that fixing the problem.
If it doesn't, open the page in the browser, right click and choose "Inspect Element" or similar. Then you can dig around and see if your css looks like you expect it to, see if you're getting any 404's returned, etc. This should lead you very quickly to the problem.
Failing all that, try it in a different browser.
BTW, I don't think this could have anything to do with Sublime.
ps. If you're still battling this, please edit your question to include the full css file and html and a link to the live page.
1-perhaps your div.home is empty so not enough height to display it .(for example use height : 200px to see it)
2-another reason is about your img url . if its in a folder like images you should try this
.home{
background-image: url('images/bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
if you want add background-image in sublime...
body {
font-family:arial, helvetica, sans-serif;
font-size: 10px;
background-image: url(../images/background.gif);
}
Related
I'm trying to use the property height: -webkit-fill-available.
For that purpose I built this example https://codepen.io/anon/pen/VJoOWW
I'm using Ubuntu 18.04 and when I ran the code on Chrome, everything woks fine, but in Firefox I could not make it work.
My Firefox: Firefox Quantum 68.0, Mozilla Firefox for Ubuntu, canonical 1.0
EDIT1: Using width: -moz-available did little changes on the layout, but the image isn't displaying in the same way as chrome
EDIT2: The first image is correct (Chrome). The last image is displayed on Firefox, I would like to display the image on Firefox in the same way as Chrome
It seems like you are trying to fit the image inside the containing div. You can do that with well-supported CSS properties. There are many ways, here is one.
.block {
border: 1px solid red;
height: 85px;
}
.img {
margin-bottom: 10px;
max-height: 100%;
}
<div class="block">
<a href=''>
<img class ="img" src="https://s3.amazonaws.com/monetostatic/email/white-label/ustrike/logo_header.png">
</a>
</div>
you can simply give a height: inherit; to your <img> and of course to its wrapper <a> and you'll see it works exactly like chrome.
also, remove width: -moz-available; its useless here.
and with this approach, you won't need height: -webkit-fill-available; anymore.
hope it was helpful.
I have an HTML page where I need to render 3 images, one on top of each other.
<div id="preview">
<img src="transparent-image">
</div>
with the following CSS
#preview{
background-image:url(layer0-image), url(layer1-image);
background-size:100%, 100px;
background-blend-mode: multiply;
width: 820px;
height: 350px;
}
The fist 2 images gets blended together using the CSS property background-blend-mode: multiply, on top of this I put the last image (transparent-image) with a transparent background (Imagine a photo of a room, with the wall area being transparent).
The result is exactly what I want but when I try to put
#preview{
width:100%
}
to make it responsive; It works flawlessly, but on ios the transparency is lost.
I tested this behaviour on Chrome, Safari and Firefox (iOS). No problem at all on Chrome, Safari, Firefox on OSX, Android, Windows.
Is there something I'm missing? Thanks for your time.
EDIT:
layer0-image and transparent-image are the same image, layer0-image has no transparency and gets multiplied with layer1-image then on top of this blended image I put transparent-image.
I tried to change transparent-image with another one, the problem seems to be the blending between layer0-image and layer1-image, but due to the fact that layer0-image and transparent-image are the same, at first I thought there was a transparency problem.
The transparency is there, but the div #preview has 0px height when put to
#preview{
width:100%;
height:auto;
}
Showing no blending.
EDIT2:
I'm adding an example to show and replicate the error: https://jsfiddle.net/dyqnghdo/3/
Ok, I finally found the problem. Having:
#preview{
background-image:url(layer0-image), url(layer1-image);
background-size:100%, 100px;
background-blend-mode: multiply;
width: 820px;
height: 350px;
}
and then setting:
#preview{
width:100%;
}
casused the error. To fix it I tried setting:
#preview{
width:100%;
background-size:cover, 100px;
}
The problem is gone even if it's not clear to me why it was happening.
the IE doesn't show SVG images on my website.
The first image that isn't shown is a logo image which is put via :before content in front of a Logofont.
the css code is the following:
.logo-svg:before {
content: url('images/logo.svg');
}
.logo-svg {
height: 1.6em;
width: 1.6em;
display: inline-block;
margin-right: 0.2em;
position: relative;
top: 0.2em;
}
Then a few images, that are background images for icons are not shown too, the CSS is here:
.author-link-posts {
background-image: url("/images/icons/svg/archive.svg") !important
}
Has somebody an idea why the IE doesn't show the SVG or maybe a workaround or something like this?
Regards,
Markus
SVG is not supported in IE8 and below. Is this issue happened in all other browsers? Also you can use modernizr as a fallback.
Basically Modernizr will add a "no-svg" class in tag.
The solution are the paths. I had to put the slash before the path, so it works in the IE.
I'm developing a website that includes flashcards for learning Chinese characters. The problem is that IE renders fonts slightly higher on the line than do other browsers I've tested. This isn't normally a big deal, but with a flashcard, the font is so big that the difference in placement becomes very noticeable.
I uploaded a dummy version of the webpage here: http://mandaclu.com/dummy/flashcard.html.
Open the link in both Firefox/Chrome and IE to see the difference (To see a really simple page with the same problem, use this link: http://mandaclu.com/dummy/test.html).
I've looked all over and haven't found any way to get that character to sit in the same place on the page regardless of the browser. Does anyone have any ideas? (CSS resets haven't worked either) Thanks for any help you can provide.
Looks like a difference in the way IE and other browsers render text with line-height > text-size.
Try setting line-height = text-size and add a top padding to force the text down instead.
eg.
#char {
display: inline-block;
font-size: 180px;
line-height: 180px;
margin: 0;
padding: 30px 0 0 0;
position: relative;
vertical-align: bottom;
width: 260px;
}
I've used the following code for background image of body tag.
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
it works in IE,Opera and chrome but doesn't work in FireFox.
I've tried also :
background-image: url("images/taling.gif");
and
background-image: url('images/taling.gif');
but it doesnt work on FireFox
your document body is height=0, and width=0, if you try to give it some height or width the image should be displayed
There is no problem with your CSS. What the problem is most likely the result of is either you are not assigning a width and height to the body tag, you are naming your image incorrectly, using the incorrect extension for your image, or the path to your image is incorrect, but there is also a possibility that you need to add a width and height.
If you use Firefox, you can test what is going on by using Firebug. You right click, and choose inspect element. Once done, in the right column of Firebug, you can see your declaration for background-image. If it says image not loaded or cannot be found, then one of the three things I pointed out above is the problem.
I know you said that the image does show up in other browsers, just not in Firefox. So, consider some modifications to the rest of your CSS. You may not be specifying a browser reset.
Just FYI, you can condense your CSS by doing the following:
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
to
background: #2e2e2e url(images/taling.gif) repeat-x;
As for the body tag, you may want to add these properties and values:
margin: 0;
padding: 0;
width: 100%;
height: 100%;
Google "CSS browser reset"
One example of a browser reset is the following:
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
The above is the most simple browser reset you can have. It does not take into account ul,ol,li,h1,h2,h3,h4,h5,h6,li,p,a,img,blockquote, etc.
Also, look into using a clearfix.
I could ramble on and on as to why you may be having this problem.
I hope that helps.
Try:
background: url('yourimage.ext') repeat-x;
It works for me.
Edit: to match what you're doing, it should in fact be:
background: #2E2E2E url('images/taling.gif') repeat-x;