CODEWITHSUNDEEP
javascripthtmlcss
g24
g24

Reputation: 19

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

Upvotes: 0

Views: 1140

Answers (2)

Kaan Burak Sener
Kaan Burak Sener

Reputation: 994

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.

Upvotes: 1

steve7n
steve7n

Reputation: 11

You could check again moving your <body> tag up, since you are using it after the <header> tag. <body> should wrap everything on the html part.

Upvotes: 0

Related Questions