I'm a very newbie to CSS/HTML and I can't seem to fix an issue I have.
This is the website I'm developing http://sahsahashas.tk
Now, when I preview website over Dreamweaver in chrome this is how navigation bar looks (the way its supposed to)
http://i.imgur.com/4dw1j6K.jpg (it is actually a picture, not a background color :)).
I know it looks almost the same but it really annoys me. Also, I know my CSS code is a mess but again, I'm a newbie.
.navbar {
width: 708px;
height: 61px;
margin: auto;
background: url(navbarr.jpg);
font: normal normal 700 1em/4em Arial,sans-serif;
z-index: 2;
}
You have a typo: background: url(navbarr.jpg); should be navbar.jpg or your image navbarr.jpg doesn't exist on the server. There is an image called navbar.jpg. Hope this helps.
Look at css in my firebug: http://i.imgur.com/Vdi0hfZ.png
to specify the image as background you should not use only background,
I will suggest you to specify the background-image attribute and image name with valid path should in single(or double) quoted..
background-image: url('navbarr.jpg');
Related
I am currently building a website and ran into a issue with my code. I am trying to set an image as a background for my header. I have checked the path to my image, the spelling of everything, and have checked my syntax online. Everything seems to match, so I don't understand why my image is not popping up. Any help you guys can give would be amazing. Thank you. Below is my css code:
header {
text-align: center;
background-image: url("image/concert.jpg");
background-size: 700px;
height: 333px;
width: 500px;
}
In addition to what other people already commented on your question, it is worth noting that the filepath must be relative to the css file's location.
Say your entire project is in a folder named root, and css is located in root/css/styles.css but image is in root/image/concert.jpg, then, from your stylesheet, you should call the image like background-image: url("../image/concert.jpg");
Like #David Alsbright said, you should check the development tools console of your browser. It will help you determine if there's a problem with the file path.
I have this div :
<div id="trees"></div>
Formatted with this css:
#trees {
width: 100%;
position: absolute;
top: 37%;
height: 40%;
background: url("/img/Tree.png") repeat-x;
background-size: auto 100%;
}
It works fine in all the browsers I tested, with this result:
Except in IE/Edge, where it looks like this:
Trees with color glitches:
The weirdest part is that this issue does not affect any other divs with similarly configured background images like the train tracks or the mountains... I have search a lot on this and couldn't seem to find an answer anywhere. I also tried to convert the image from png to gif and I got the same result. How would I fix this for IE/Edge compatibility?
Here is a codepen reproducing the problem in Edge: https://codepen.io/darthmooguy/pen/gmNWwg
I was having the same issue as you, and whilst this doesn't resolve the cause of the issue, I've found that adding transparent padding to the edges of your image and increasing the background size is a usable workaround in many cases.
https://codepen.io/anon/pen/BRwxbR
Adding the following scaled my background, so set it to an appropriate level.
background-size: auto 250%;
background-position: center center;
Please ignore the colour change - I was also wondering if a specific colour triggered it based on your initial problem, but it did not.
I might look at this further as my workaround here does not actually solve my issue. :)
here is the tree image (png) saved from Irfanview (save with transparency, no compression)...I'm not sure if Irfanview has stripped the Adobe meta data though.
as you can see... the colors and transparency color is completely different from the adobe authored source.
I have 8 html div's. I have set background of all divs with different image, All are displaying properly except 2 div's in IE8 and in default android browser. If i set any other image for these two div's background, they will also work. But if rename those two images and set them, they wont work. I am confused. Below is the code
#tabs-8{
background: url(../images/banner/290/open-house.jpg);
}
#tabs-6 {
background: url(../images/banner/290/our-trainers.jpg);
}
Is there any issue with those images Or Is this the issue in IE8.
Using shorthand property for background might cause the problem. So just use background-image: url('path'); if you don't specify any other values.
If you use shorthand property, use like this at least:
background: url('path') no-repeat;
I found this problem :) Your images doesn't load on IE8. If you enter this link http://115.115.80.139/images/banner/290/our-trainers.jpg on address bar in IE8 you don't see image. I think that problem on server or image. Try resave image with another name or upload it on other hosting
Yes You need to call the image using background-image: url Property.
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
I am trying to achieve the following CSS background effect as in the following page.
However, instead of getting that smooth gradient, I get something like the image shown below.
My CSS:
body{
background:-webkit-radial-gradient(#205983, #0A2742); background:radial-gradient(#205983, #0A2742); overflow:hidden;
}
I want to achieve the same result. I Have no other CSS for the body.
From Chrome inspector (for the body element)
background: -webkit-radial-gradient(#205983, #0A2742);
background: radial-gradient(#205983, #0A2742);
overflow: hidden;
I've checked both pages on the same browser and I don't use any CSS reset code. How can I achieve the same results. Thanks.
The example page you provided works fine here in Google Chrome (v. 28.0.1500.95 m).
I've inspected the site's source. The css they use is:
#wrap {
min-width: 600px;
height: 100%;
position: relative;
background: -webkit-radial-gradient(#205983, #0A2742);
background: radial-gradient(#205983, #0A2742);
overflow: hidden;
}
Did you try using all the same css rules on your site? Mainly notice the height: 100%; rule. That might do something good.
Furthermore, the GPU and its settings on your machine might cause this problem to appear. But most of the time the problem originates from the rendering engine the browser uses. Sudden color-combinations don't harmonize, causing the shown effect.
Try slightly different colors. Use the colorpicker in Google Chromes Inspector (the small rectangle next to the color value of the css rule).
A recommendable online tool to generate CSS Gradients is: ColorZilla. It provides you with css (or sass css if desired) containing all common -vendor- prefixes and even adds IE support. I have positive experiences with it. Give it a try.
Good luck!
Hi guys I have a problem of images showing background-color on IE6 and its supposed to be a transparent background. on all the other browsers it is showing fine except for IE6.
can anyone please tell me what am i doing wrong. tried the opacity to 0 but its still showing the background-color.
The fix is quite simple. No need to include any JavaScript. Define your css like this and include your image name in filter.
.whatever {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 500px; /* Must specify width */
height: 176px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
IE6 doesn't support semi-transparent PNGs. Try something like this for a work-around if you really need to:
http://css-tricks.com/snippets/css/png-hack-for-ie-6/
or http://www.jay-han.com/2008/10/15/unit-png-fix-best-ie-png-hack/
Or just drop IE6, it's way behind all other browsers, and fast losing market.
IE6 doesn't support transparent PNGs properly.
This page has a fix which involves a behaviour file. Alternatively you could use GIFs.