DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?
Question
I'm having some issues with having an image that isn't showing up properly. I've scouring the internet for the past hour and been trying various different ideas, but I'm stumped. On this webpage, I have an image of some text "Vitant" that was showing up just fine in all browsers when I was working offline.
After I uploaded the site to my webhost, for whatever reason, this one background image stopped showing up in firefox and chrome. However, it shows up just fine in IE. It also shows up just fine in the mobile versions of Firefox and Chrome.
I am using this image as a background-image for a div (#vitant-text).
Webpage: http://www.joshhemmyonline.com/vitant_test
Link to Image: http://www.joshhemmyonline.com/vitant_test/_images/vitant_ad_banner_text.png
*note: The image in question should be displaying right above the text "The 2 Step Treatment for Better Sleep & More Energy"
The relevant id is #vitant-text
Source HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Vitant: The 2-Step SLEEP/ENERGY Solution. Inquire about a sample today!</title>
<link href="_css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="header-container">
<a href="#" id="logo" name="top">Vitant Sleep & Wakefulness Aid</a>
<div id="main-banner"></div>
<div id="sample-div">
<h1>Try a Sample</h1>
<p>* No Cancellation Required<br />
* No Obligation</p>
<form action="" method="post">
<input name="" type="text" id="name_text_field" Value="Name..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input name="" type="text" id="email_text_field" Value="Email..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input name="" type="image" src="_images/tryitout_button_BLANK.png" id="submit-button-form">
</form>
</div>
<div id="vitant-box"></div>
</div>
</header>
<section>
<div id="content_container">
<div id="vitant-text"></div>
<h1 id="contentHeadingText">The 2 Step Treatment for <span>Better Sleep</span> & <span>More Energy</span></h1>
<div id="work-div">
<h1>How Does it Work?</h1>
</div>
<div id="nightly-supplement-div">
<h1>Nightly Supplement Ingredients</h1>
<p class="instructions">*Take one tablet before going to bed to promote relaxtion
and drowsiness to aid in falling (and staying) asleep.</p>
<p class="ingredient-text">
<span>Melatonin</span> is a hormone that is naturally produced in the brain.
Studies have shown that melatonin plays a role in sleep and
wake cycles. Insufficient levels of melatonin in one’s body is a
common cause of certain sleep disorders. The use of melatonin
supplements can help improve and regulate the normal
sleep cycle.</p>
<p class="ingredient-text">
<span>L-Theanine</span> is an amino acid that has been shown to both
calm the brain and to enhance concetration. This amino acid
comes from tea leaves. Tea has been used for centuries for its
calming and relaxing symptoms provided to its drinkers.
Studies suggest that L-Theanine is largely responsible for this.</p>
<p class="ingredient-text">
<span>GABA</span> (better known as γ-Aminobutyric acid) is an amino acid
that has been shown to regulate & relax the body’s neurological
system. It has also been shown to have a significant role in
regulating and sustaining muscle tone within the human body.</p>
<p class="ingredient-text">
<span>5-HTP</span> is an amino acid (5-Hydroxytryptophan). The body
produces 5-HTP from Tryptophan, another amino acid, and
converts it to serotonin, an important chemical for regulating
the brain and for mood-enchancements. Serotonin is also
responsible for hunger and sleep.</p>
<p class="ingredient-text">
<span>Lemon Balm</span> is a perennial herb from the mint family. The
leaves have been used to treat many afflictions from stomach
disorders to Alzheimer’s disease. Leomon balm contains chemicals
that have a sedative and calming effect.</p>
<p class="ingredient-text">
<span>Passion Flower</span> is a medicinal herb that has long been used
as a sedative.</p>
<p class="ingredient-text">
<span>Chamomilla Recutita</span> is a daisy-like plant that bas been
used throughout the centuries for its medicinal uses. Along
with being used to treat stomach ailments and as an
anti-inflammatory, the plant has also traditionally been used as
a sleep aid for its relaxing properties.</p>
<p class="ingredient-text">
<span>Valerian</span> has been used for thousands of years throughout
Europe and Asia as a sedative. Studies suggest that valerian is
effective at helping people with insomnia. It can help provide
a better-quality sleep and can help to fall asleep quicker.</p>
</div>
<div id="vertical-divider"></div>
<div id="daily-supplement-div">
<h1>Daily Supplement Ingredients</h1>
<p class="instructions">*Take one tablet first thing in the morning to provide your
body with effective energy to wake you up fast!</p>
<p class="ingredient-text">
<span>Caffeine</span> is the world’s most effective & powerful over-the-counter
mental altertness and energy aid.</p>
<p class="ingredient-text">
<span>Green Tea Extract</span> is a rising start in for its numerous health
benefits. Green Tea is effective for providing energy and according
to the University of Maryland Medical Center, it may boost the
metabolism and help burn fat.</p>
<p class="ingredient-text">
<span>Essential Vitamins</span> are important for every day good health,
well-being, and energy. We’ve packed plenty of Vitamin B3, B6, B9,
B2, and B12 into this supplement for that extra kick in the morning.</p>
<p class="ingredient-text">
<span>Ginko Biloba</span> is derived from a tree which has been used medic-
inally for thousands of years. Evidence seems to suggest that it is
useful for memory enhancement and mental clarity.</p>
<p class="ingredient-text">
<span>Ginseng</span> is an herb that is known to increase energy, have certain
anti-fatigue components, relieves stress, and increase memory.</p>
<p class="ingredient-text">
<span>Dimethylaminoethanol (DMAE)</span> is an organic compound.
Short-term studies have shown this compound to provide an
increase in alertness with a positive influence on mood.</p>
<p class="ingredient-text">
<span>Taurine</span> is an amino acid that helps regulate heartbeat, muscle
contractions, and energy levels.</p>
<p class="ingredient-text">
<span>Guarana</span> comes from plants in South America. It has long been
used to increase energy and mental alertness. Guarana contains
caffeine, theobromine, and theophylline, which are all known
stimulants.</p>
<p class="ingredient-text">
<span>Antioxidants</span> come in various forms, which have been added
to our daily supplement. Vitamins A, C, and E all have antioxidant
properties. Antioxidants have a power effect on your health and
energy levels.</p>
<p class="ingredient-text">
<span>Glucuronolactone (DGL)</span> is believed to aide in detoxification,
freeing hormones and other chemicals, and the biosynthesis of
vitamin C. It is used to help with glycogen depletion by preventing
other substances from depleting glycogen supplies in the muscles.</p>
<p class="ingredient-text">
<span>Yerba Mate</span> is derived from the leaves of a shrub. This herb is
an all-natural source of caffeine. A form that many believe does
not produce any negative side effects.</p>
<p class="ingredient-text">
<span>L-theanine</span> is an amino acid, derived from tea leaves, that
has been shown to calm the brain while also enhancing con-
centration.</p>
</div>
<div id="creator-message-div">
<h1>Message from the creator:</h1>
<p class="create-message">“Waking up in the morning has long been a difficult task for me. Even after my alarm clock rings I still am in the ‘wake-up’ phase for a good
20-30 minutes, only actually waking up once I get done drinking my morning cup of coffee. I knew I needed something to help me get
going faster in the morning and I also knew I needed to improve my poor sleeping habits, which were taking valuable energy from
my morning routine. Thus, I created two supplements as part of a daily 2-step regimen. This regimen is safe for everyday use and the
two supplements work together to help provide me a better night’s sleep and to get the energy that I require in the morning.”<br />
<span>-Josh Hemmy (Vitant Creator)</span></p>
</div>
</div>
</section>
<footer>
<div id="footer-container">
<p class="footer-tagline1">Start your journey to the <span>best sleep</span></p>
<p class="footer-tagline2">and <span>most energy</span> that you have ever experienced!</p>
<p class="obligationtext">There is No Obligation & Nothing To Cancel</p>
<a href="#top" class="footerbutton">Try It Out</a>
<div id="vitant-footer-logo"></div>
</div>
</footer>
</body>
</html>
Source CSS:
@charset "utf-8";
/* CSS Document */
/********** CSS RESET **********/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/********** MAIN BODY STYLES **********/
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 62.5%;
background: #fff;
}
/********** HEADER STYLES **********/
header {
display: block;
height: 467px;
background: url(../_images/header_main_bg.png) repeat-x 0 0;
}
#header-container {
display: block;
width: 1000px;
margin: 0 auto;
height: 467px;
position: relative;
}
#logo {
float: left;
display: block;
width: 244px;
height: 115px;
background: url(../_images/logo.png) no-repeat 0 0;
text-indent: -9999px;
margin: 36px 0 0 47px;
}
#main-banner {
width: 1000px;
height: 304px;
position: relative;
top: 163px;
background: url(../_images/main_banner.png) no-repeat 0 0;
}
#sample-div {
position: relative;
top: -241px;
left: 604px;
display: block;
width: 291px;
height: 306px;
background: url(../_images/sample_form_bg.png) repeat-x 0 0;
border: 2px solid #b3b3b3;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#vitant-box {
display: block;
width: 321px;
height: 183px;
background: url(../_images/vitant_box.png) no-repeat 0 0;
position: absolute;
top: 349px;
left: 73px;
}
#sample-div h1 {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #2a3333;
margin-top: 21px;
}
#sample-div p {
color: #2a3333;
font-size: 11px;
margin: 15px 0 0 30px;
}
#name_text_field {
margin: 18px 0 0 26px;
padding-left: 30px;
padding-right: 5px;
width: 205px;
height: 32px;
background: url(../_images/name_textfield.png) no-repeat 0 0;
border: none;
color: #2a3333;
font-size: 20px;
}
#email_text_field {
margin: 18px 0 0 26px;
padding-left: 30px;
padding-right: 5px;
width: 205px;
height: 32px;
background: url(../_images/email_textfield.png) no-repeat 0 0;
border: none;
color: #2a3333;
font-size: 20px;
}
#submit-button-form {
display: block;
width: 232px;
height: 55px;
background: url(../_images/tryitout_button.png) no-repeat 0 0;
margin: 29px 0 0 30px;
}
#submit-button-form:hover {
background-position: 0 -55px;
}
/********** CONTENT STYLES **********/
section {
display: block;
width: 100%;
min-height: 658px;
background: #f2f2f2 url(../_images/content_main_bg.png) repeat-x 0 0;
}
#content_container {
margin: 0 auto;
display: block;
width: 1000px;
min-height: 658px;
overflow: hidden;
}
#vitant-text {
float: left;
width: 1000px;
height: 65px;
background: url(../_images/vitant_ad_banner_text.png) no-repeat 0 0;
margin-top: 65px;
}
h1#contentHeadingText {
font-family: Verdana, Geneva, sans-serif;
font-size: 28px;
text-align: center;
color: #2a3333;
}
h1#contentHeadingText span {
color: #9e3b02;
font-weight: bold;
font-style: italic;
}
#work-div {
width: 368px;
height: 50px;
background: #333b3a;
margin: 30px auto;
}
#work-div h1 {
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 50px;
text-align: center;
}
#nightly-supplement-div {
float: left;
width: 478px;
min-height: 1100px;
padding-right: 20px;
font-size: 14px;
margin-top: 30px;
}
#vertical-divider {
float: left;
width: 4px;
height: 1028px;
background: url(../_images/vertical_divider.png) no-repeat 0 0;
margin-top: 80px;
}
#daily-supplement-div {
float: left;
width: 478px;
min-height: 1100px;
padding-left: 20px;
margin-top: 30px;
}
#nightly-supplement-div h1, #daily-supplement-div h1 {
font-size: 24px;
color: #333b3a;
}
#nightly-supplement-div p.instructions, #daily-supplement-div p.instructions {
color: #9e3b02;
font-size: 14px;
font-style: italic;
line-height: 18px;
margin-top: 5px;
}
#nightly-supplement-div p.ingredient-text, #daily-supplement-div p.ingredient-text {
color: #525555;
font-size: 14px;
font-style: italic;
line-height: 18px;
margin-top: 36px;
}
#nightly-supplement-div p.ingredient-text span, #daily-supplement-div p.ingredient-text span {
color: #2a3333;
font-size: 18px;
}
#creator-message-div {
float: left;
clear: both;
margin-top: 100px;
}
#creator-message-div h1 {
font-size: 18px;
color: #2a3333;
}
#creator-message-div p.create-message {
margin-top: 22px;
margin-bottom: 42px;
color: #525555;
line-height: 20px;
font-style: italic;
font-size: 14px;
text-indent: 30px;
}
#creator-message-div p.create-message span {
font-weight: bold;
}
/********** FOOTER STYLES *********/
footer {
background: #fff;
border-top: 1px solid #cacaca;
overflow: hidden;
}
#footer-container {
margin: 0 auto;
width: 1000px;
min-height: 141px;
color: #2a3333;
font-family: Verdana, Geneva, sans-serif;
}
.footer-tagline1 {
float: left;
font-size: 18px;
color: #2a3333;
margin-top: 35px;
margin-left: 40px;
}
.footer-tagline1 span {
font-weight: bold;
font-style: italic;
}
.footer-tagline2 {
float: left;
font-size: 18px;
margin: 6px 0 0 206px;
}
.footer-tagline2 span {
font-weight: bold;
font-style: italic;
}
p.obligationtext {
float: right;
font-size: 14px;
margin-top: -40px;
}
a.footerbutton {
float: right;
margin: -20px 30px 0 0;
display: block;
width: 232px;
height: 55px;
background: url(../_images/tryitout_button.png) no-repeat 0 0;
text-indent: -9999px;
}
a.footerbutton:hover {
background-position: 0 -55px;
}
#vitant-footer-logo {
width: 85px;
height: 43px;
float: left;
background: url(../_images/footer_logo.png) no-repeat 0 0;
}
If anyone has any ideas or suggestions I would very much appreciate it!
1 answers
solution1
2 ACCPTED 2013-04-05 09:40:22
If you're using an AdBlocker extension, try disable. The background can't shown for me, when the adblocker was active. Because these extensions are hide the banner and similar named selectors and file names, so the best way if you change the names from banner
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Background image doesn't show in firefox and IE
Background image will not show up in IE8 or below but works in Firefox and Chrome
Issue related to Background image doesn't show in IE8 only
background-image doesn't work with the pic in “img” folder only when online url
Image won't show up in IE8, only in Chrome or Firefox or IE9
jquery works only offline in chrome, online not at all
Page works fine in chrome/firefox but doesn't in IE
This Javascript doesn't work in IE but works in Chrome, Firefox and Opera
div doesn't act on firefox/ie like on chrome
Background image doesn't show in iOS Chrome
Related Tags