g24 g24 - 1 month ago 7
CSS Question

White spot on my HTML page

I'm making a random website but & my problem is that there's this white spot on top of the page that's also interfering with how the background is supposed to look. Why's this happening? I cannot find anything that's causing this happen. Below the code is as follows. JS > CSS > HTML.

Thanks for taking the time to read.

JS > CSS > HTML is how



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$(".pull-me").click(function() {
$(".panel").slideToggle("slow");
});
});

$(document).ready(function() {
$(".pull-me2").click(function() {
$(".panel2").slideToggle("slow");
});
});

<style type="text/css">
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url("http://i64.tinypic.com/2jdn8lw.jpg");
}

#mainHeader {
text-shadow: -14px 3px 10px;
font-size: 85px;
font-family: cursive;
}

.1 {
height: 10px;
}

.panel {
text-align: center;
display: none;
}

.panel2 {
text-align: center;
display: none;
}

.pull-me {
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: black;
}

.pull-me2 {
text-align: center;
font-family: sans-serif;
font-size: 30px;
}

.pull-me3 {
text-align: center;
font-family: sans-serif;
font-size: 30px;
}

#ig {
height: 30px;
}

.menu {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url("http://i64.tinypic.com/2hozok4.jp");
background-repeat: no-repeat;
font-family: cursive;
width: -500px;
}

</style>

<header>
<h1 class="text-center" id="mainHeader">Random Website</h1>
<a href="https://www.instagram.com/piccolo_villagio/" ><img id="ig" src="http://www.logosurfer.com/sites/default/files/styles/large/public/instagram-logo_0.png?itok=ujucvqfJ" height = "20px"></a>

<div class="panel">
<img class="1 img-responsive" src="http://i64.tinypic.com/scrp6h.jpg" width="324"></a>
<h3>500</h3>
<img class="1 img-responsive" src="http://i68.tinypic.com/2h7qbn4.jpg" width="324"></a>
<br/>
<br/>
</div>
<div class="pull-me">Scroll Menu 1</div>
</header>
<!--
Entering body below
-->
<body>
<div class="panel2">
<div class="menu">

</div>
<br/>
<br/>
</div>
<div class="pull-me2">Scroll Menu 2</div>
</body>





Screenshot of HTML page

Answer

The background is white because of the bootstrap.css.

Just comment out the background-color: #fff line in scaffolding.less file

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    /* background-color: #fff; */
}

or you can add the code below to your .css file

body {
    background-color: transparent!important;
}

Here is the updated version: https://jsfiddle.net/oj91Lb1d/2/

By the way, <header> tags should be inside the <body> tags. Most probably, you confused it with the <head> tags. Besides that, there are two </a> tags, which supposed to include the <img/> tags but there were no opening <a href="#"> tags.

Comments