The image of a background: or background-image: not showing up on website, img src not showing up either.
However, all pictures show up fine only on chrome desktop broswer, but they don’t show up on chrome mobile broswer. Some of the browsers I’ve tested and don’t show the images on my website are: chrome mobile, safari mobile, IE desktop, Microsoft edge desktop.
The entire html css code can be found at the website, is it allowed to include the link in my post?
styles.css
.wrapper {
background: #fff;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 0;
box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-image: url('./imgSrc/chessbk.png');
background-position: center;
background-size: cover;
/* background-attachment: fixed;*/
/* -o-background-size: cover;*/
/*-moz-background-size: cover;*/
/*-webkit-background-size: cover;*/
}
/* Main page style */
.wrapper .main {
position: relative;
clear: both;
overflow: hidden;
height: auto;
min-height: 100%;
padding: 0 0 0 0;
}
.main {
background-image: linear-gradient(rgba(172, 207, 229, 1), rgba(172, 207, 229, .1));
clear: both;
overflow: hidden;
padding: 0px 0 0 0;
} /*----end main page styles---*/
/* Main page header style */
.header {
position: relative;
z-index: 1;
}
.header .headerIMG {
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .3;
width: 100%;
height: 100%;
}
.siteTitle {
padding-top: 25px;
text-align: center;
margin: 0 auto;
width: 940px;
position: relative;
color: floralwhite;
padding-bottom: 25px;
} /*-----end header styles----*/
/* Navigation styles */
#access {
background: url('./imgSrc/access_bg.png');
/*
opacity: 0.8;
filter:alpha(opacity=80);
*/
display: block;
float: left;
margin: 0 auto;
width: 940px;
font-weight:bold;
border-top:1px solid rgba(0,0,0,0.5);
border-bottom:1px solid rgba(0,0,0,1);
}
Case of using background: HTML
<body>
<div class="wrapper">
<div class="header">
<div class="headerIMG" style="background: url(imgSrc/planet.jpg) no-repeat center bottom;">
</div>
<div class="siteTitle">
<h1> Rocky Mountain Chess Rating System</h1>
<h2> Idaho Chess Association Database</h2>
</div>
Further down in the html file above:
<div class="main">
<div class="icaImg">
<img src="imgSrc/icaLogo.png">
</div>
<div id="contentGameEnter">
<div class="enterGame">
Just tested it, this is an update edit, images appear on safari desktop and Firefox desktop. So the browsers which don’t work are mobile browsers and IE desktop, Microsoft edge desktop
Once you get https, I used letsencrypt to get free sll certificate, it solves the problem. In other words, getting https has now allowed the images to show up on chrome mobile, safari mobile, (chrome desktop, but they already showed here), IE desktop. Overall, get https it solved this problem for me.
Related
I am running Android 10 and Chrome Beta 84.0.4147.89
But the rendering in Chrome and FF of mix-blend-mode seems to be very different. The background of the chat window should be white. When instead it is colorful.
So my question is how can this be fixed for Chrome browser on the
mobile phone?
Also in Chrome on desktop version it seems to run fine as long as
html becomes scrollable.
I am really confused as to what is happening and which fix may be applied to fix at least some of it.
https://jsfiddle.net/f7xbnozt
.chat-container {
position: absolute;
width: 300px;
border: 2px solid black;
border-radius: 8px;
overflow: hidden;
}
.chat {
float: left;
width: 280px;
height: 300px;
padding: 10px 20px;
overflow: auto;
}
.chat-container:after {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(rgb(0, 95, 255) 0%, rgb(146, 0, 255) 50%, rgb(255, 46, 25) 100%);
content: '';
mix-blend-mode: screen;
pointer-events: none;
}
.chat div {
color: white;
background: #1e1e1e;
border-radius: 8px;
padding: 10px 12px;
}
.chat .q {
background: blue;
margin: 6px 0 6px 50px;
}
.chat .a {
background: green;
margin: 6px 50px 6px 0;
}
<div class="chat-container">
<div class="chat">
<div class="q">Chat message...</div>
<div class="q">Chat message...</div>
<div class="a">Chat message...</div>
</div>
</div>
The reason why nothing works is the algorithm.
Transparent background + blue and green + gradient background equals vivid result you see in chrome.
While white background + blue and green + gradient background equals the desired result.
.chat-container {
background-color: #ffffff;
...
}
Curiously, if you copy the original code from jsfiddle to codepen, then nothing will work there either, even in firefox.
I have found some weird CSS bug.
I have a <div> container with some text and a Font-Awesome icon inside. The <div> container is styled so that it has a small border. The weird thing is that the border seems to "think" that the <div> is only half the height of what it actually is.
This occurs only in Chrome mobile (Android) but not in Chrome desktop (not tested in safari and co...)
HTML
<div class="sidebar">
Lade Daten... <li class="fa fa-spin fa-spinner"></li>
</div>
CSS
#media only screen and (max-width: 860px)
{
.sidebar {
position: relative;
width: auto;
margin: 0 20px;
}
}
.sidebar {
position: absolute;
background: rgb(255, 255, 255);
border-radius: 5px;
margin-left: 20px;
padding: 20px;
border: 1px solid rgba(0, 0, 0, 0.9);
width: 335px;
box-shadow: 2px 2px 5px;
}
body {
margin: 0;
background: rgb(60,60,60);
font-size: 16px;
font-family: 'Share Tech Mono', Arial;
}
Try putting height: (px you want it) in your #media query
I've integrated an image to line up with and other image at the top (lines)and there is 6px difference in Firefox compare to Chrome or Safari. I don't understand where the difference comes from since all my other images (lines) are lining up perfectly in all browsers. my website: beta.zenniel.ca
Here is my css:
.BlogueTop {
float: right;
background: url(http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg) no-repeat;
width: 12px;
height: 268px;
margin: -269px 79px 0px 0px;
padding: 0;
border: 0;
}
By the way, the image at the top is the same place in Firefox and Chrome (140px from the right).
Thanks for your help!
at top of your .css file add
*{
margin: 0;
padding: 0;
}
Each browser does have his own default values. Therefore there are css files that set all default values of the browsers to your own default values. Such css files you can find on the web.
Here's an example: http://meyerweb.com/eric/tools/css/reset/
Why not changing your margin to this
.BlogueTop {
background: url("http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
float: right;
height: 268px;
margin: -269px 84px 0 0;
padding: 0;
width: 12px;
}
instead of this
.BlogueTop {
float: right;
background: url(http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg) no-repeat;
width: 12px;
height: 268px;
margin: -269px 79px 0px 0px;
padding: 0;
border: 0;
}
Had the same issue.
Setting line-height: 0px worked for me.
I'm creating a header for a website. When I have the website on my normal, full browser width the header appears just as it's supposed to, like this. However, as soon as I reduce the screen size to half the width, this pops up: http://i.imgur.com/w1P14QI.png (the black bar that appears). I've tried using inspect element to trace where the dropshadow's coming from, but I have no idea where the problem is.
CSS code:
div#header {
background:#41038e;
min-width: 100%;
height: 175px;
margin: 0;
padding: 0;
z-index: 1;
box-shadow: 0px 5px 5px -5px #666;
}
div#white-background {
min-width: 100%;
height: 125px;
background:#FFF;
padding: 0;
z-index: -1;
}
div#header-inner {
width: 1200px;
height: 200px;
margin: 0 auto;
padding: 0;
z-index: 1;
}
div#logo {
height: 100px;
padding-top: 25px;
margin: 0 auto;
width: 1200px;
}
HTML:
<div id="white-background">
<div id = "logo"><!--begin logo-->
<h2>The Cupertino Florist</h2>
<!--<img src="img/logo.png" />-->
</div><!--end logo-->
</div>
Use this.
div#header {
background:#41038e;
min-width: 100%;
height: 175px;
margin: 0;
padding: 0;
box-shadow: 0 5px 5px -2px #666;
}
I am trying to center a div #logo_alt containing an image using margin: 40px auto 0px auto;.
Problem:: On Chrome, it looks perfect, but in IE, this img-containing div is aligned to the left of its parent container #header_organizer. I just cant figure out why this is happening, and how it can be fixed in IE! Any help greatly appreciated :)
HTML
<div id="header_organizer">
<div id="user_bar">...</div>
<div id="user_bar_menu">...</div>
<div id="logo_alt"> <!-- <<<<< We are centering this div! -->
<img src="logo.png" \>
</div>
</div>
CSS
#header_organizer {
width: 100%;
height: 180px;
background: black url(../images/template/header.png);
float: left;
position: relative;
z-index: 1000;
}
#logo_alt {
width: 256px;
height: 55px;
margin: 40px auto 0px auto;
}
#user_bar {
height: 30px;
color: #CCC;
font-size: 13px;
margin-right: 10px;
padding: 0px 5px;
float: right;
cursor: pointer;
position: relative;
z-index: 3000;
}
#user_bar_menu {
width: 200px;
height: 165px;
background: white;
border: 1px solid #BEBEBE;
float: right;
position: absolute;
top: 30px;
right: 10px;
-moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
display: none;
z-index: 1000;
border-image: initial;
}
The HTML file start off with <html xmlns="http://www.w3.org/1999/xhtml">.
Well there's your problem. You need to give your document an XHTML doctype declaration since your root element has that xmlns attribute anyway. Then IE will work in standards mode and render your margin: 0 auto style correctly.
Firstly, add a doctype to prevent IE from slipping into quirks more.
Then try this...
body {
width: 100%;
}