I have a header that has an image in the background and it is not showing up in IE9. It works fine in Chrome, Firefox, and Safari. The logo file that is opened in the header displays fine.
HTML:
<div class="myheader">
<img src="img/logo.png"><h5 class="your-on">You are on: Login Page</h5>
</div>
CSS:
.myheader {
height: 90px;
/* background-color: #3D8F43; */
padding: 5px;
position: relative;
border-radius: 10px;
-moz-border-radius:10px;
background-image: url("../img/header-bg.jpg");
}
Also, I am simply opening these files locally with whatever browser I want to open it with. It is a demo that I need to email different people and have them open it and view the HTML files so I need it to work locally.
I have already enabled mix content on the settings in IE but it didn't work.
Update - Should have included this first. When I first open the page IE states that it has restricted the webpage from running scripts or ActiveX controls. I allow it to do this and refresh the page but with the same result, no image.
Try this:
.myheader {
height: 90px;
/* background-color: #3D8F43; */
padding: 5px;
position: relative;
border-radius: 10px;
-moz-border-radius:10px;
background: url(../img/header-bg.jpg) no-repeat 0 0;
}
Take out the quotes on the background-image as well as the "-image". See if that works for you ;)
Also, specify the image you have within the class. So try adding:
.myheader img { /* === Specify what your inner image/logo would be --- */
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
HTML:
<div class="myheader">
<img src="img/logo.png" alt="" title="" /><h5 class="your-on">You are on: Login Page</h5>
</div>
I am not sure why it's happening to you. So i fiddled it out and here's the code(It's the same as yours, only the images are some images that i got from internet) :
HTML :
<div class="myheader">
<img src="https://www.key.com/kco/images/logo.png"/>
<h5 class="your-on">You are on: Login Page</h5>
</div>
CSS:
.myheader {
height: 90px;
/* background-color: #3D8F43; */
padding: 5px;
position: relative;
border-radius: 10px;
-moz-border-radius:10px;
background-image: url("https://www.key.com/kco/images/bg_nav-rht.png");
}
The screenshot looks like this :
The logo is the one containing the keybank string and the background is the one with red and grey color in it.
Here's the fiddle : http://jsfiddle.net/pLkbV/2/
I have tested it on IE 9 and 10 and it worked flawlessly.
So , a possible reason in your case might be that the image is not getting loaded from the path that you have provided in the background URL.
Related
I can't get my head around why when I hover over my logo it isn't linked to the landing page.
HTML:
<body>
<header>
<a href="landing.html">
<img src="img/typeface.png" alt="logo" class="headerlogo">
</a>
</header>
<img src="img/wave.png" alt="wave" draggable="false" class="wave">
</body>
CSS:
body {
margin: 0;
padding: 0;
background-color: #121420;
font-family: 'Montserrat', sans-serif;
}
header {
display: flex;
}
.headerlogo {
width: 10%;
height: 55%;
margin-left: 5%;
padding-top: 35px;
}
.wave {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
I saw other post stating that the z-index was the problem but I don't have an z-index within my css.
Running your code in a JSfiddle it works just fine (I swapped the image): https://jsfiddle.net/8e0j62zw/
Do you mean like when you click the link it doesn't go anywhere? Just gives you another blank page, or not found error.
If so you might need to check the path on your link to your landing.html
It appears to be a relative path which based on the location of your file could be causing it to break. You can read about path linking here: https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
I believe I found the issues the wave image is technically over the top of the entire page although being transparent preventing me from clicking anywhere on the site.
I fixed this problem by applying z-index: -1 to the wave image.
This problem ONLY happens on Safari, all other browsers i've checked and they work fine (Opera, Chrome, Firefox).
I basically have a large list of small images used as links to different church websites. They are listed like so:
<div class="church"><img src="images/logos/antioch.png" style="width: 150px;" /><div class="caption"><br>Antioch House<br>Location</div></div>
And the CSS is as follows:
.church {
overflow: hidden;
position: relative;
display: inline-block;
width: 150px;
height: 70px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
border-style: solid;
border-width: 1px;
border-color: #000;
}
.church img {
width: 150px;
}
I would like every image to be equal in length, so that if anyone was to add a new image, it would automatically size the logo to fit within the .church class div.
But for some reason, Safari (The only browser to do this) won't recognise the width I am trying to give to the .church img element. If I add style="width: 150px;" to the img tag in the index.html file, it works. But I feel like a disgraceful person to write that into 40 individual tags.
Perhaps i've just made a mistake somewhere that safari won't tolerate. (I am mostly a designer, so i do tend to make coding mistakes a lot)
Thanks for any help!
I have two layers of png's at the exact same position in a web page, the top one being transparent. Everything looks good in Photoshop before export. Everything is great in Safari (Mac and Ipad), but i have a weird white line in Chrome (and a lighter one in Firefox).
Chrome
https://dl.dropboxusercontent.com/s/nh8kf811h6b6v7a/2014-04-16%20at%2012.12.png
Safari
https://dl.dropboxusercontent.com/s/7iu3c0yh4rwa0yt/2014-04-16%20at%2012.16.png
<div id="layers">
<img id="band_img" src="https://lxproject.s3.amazonaws.com/uploads/band/img/643/Diana1_Rg_bottom_band.png" uid="upper_main_band">
<img id="cut_img" src="https://lxproject.s3.amazonaws.com/uploads/cut/img/228/Diana1_Rg_bottom.png" uid="upper_main_cut">
</div>
and css :
<style>
#layers {
overfow:hidden;
height: 500px;
background: #FFF;
position: relative;
}
#layers img {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
}
</style>
Fiddle :http://jsfiddle.net/yVu3v/
Thank you in advance
I am trying to make a link from an image , means after clicking an image I would like to redirect to another site . I have used the following
<div class="haus">
<img src="http://schwedenladen.de/wp-content/themes/schweden/style/img/haus_icon.png" alt="Haus">
</div>
CSS CODE
.haus {
height: 100%;
margin-left: 50px;
padding: 0 0 5px;
width: 30px;
border:1px solid red;
z-index:999;
}
I am not getting the hyper link icon , when I move mouse over the image
Your image is BEHIND the banner. Try this:
.haus>a {
position: absolute;
z-index: 9999;
}
The z-index is important, since the header has a very high value that needs to be sent to back.
K so I have an image in my html and I am settings its src using css and background: url() the reason for this is because I want to toggle the class on click so that I go back and forth between images. Everything works except for the fact that my image has a border and nothing I do seems to get rid of the stupid thing.
Here is the html:
<img class="minus" />
and here is the css:
.minus{
position: relative;
margin: 0 0 -3px 5px;
float:right;
background: url(/images/mobile/minus.png) no-repeat;
border: none;
display:block;
width: 16px;
height: 16px;
}
I have tried everything I can think of border:0px; border:0; border-width: 0px; border-style:none; anything I could find on here or on the web basicly and nothing will get rid of the stupid border. Any insight would be appreciated.
Edit: using google chrome.
I'm certainly able to reproduce this error in Chrome. Here's a demo:
.minus{
display: block;
margin: 0 0 -3px 5px;
background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
width: 100px;
height: 100px;
}
<img class="minus">
However, w3.org specifies (emphasis mine):
The SRC attribute specifies the URI for the image to be embedded. Its syntax is the same as that of the HREF attribute of the tag. SRC is mandatory.
Setting a CSS background-image is not the same as setting the src HTML attribute of <img>... and perhaps that's your problem. You should consider using a different element, e.g.: a <span>:
.minus {
display: block;
margin: 0 0 -3px 5px;
background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
width: 100px;
height: 100px;
}
<span class="minus"></span>
Here is a fiddle that uses a div with the class (I see no border). When I try an img with the class, it shows nothing (in firefox 7)