This is my Github repository: https://github.com/Yicheng-1218/OceanCrisis

I have a question is why the style in the header will automatic to be changed to none?

I have use the main.css to change header's background image to other images but it does not work.

index.html:

<div id="header">

            <!-- Inner -->
            <div >
                <header>
                    <h1><a href="index.html" id="logo">OceanCrisis</a></h1>
                    <hr>
                    <p>海洋危機</p>
                </header>
                <footer>
                    <a href="#main" >閱讀</a>
                </footer>
            </div>

            <!-- Nav -->
            <nav id="nav">
                <ul>
                    <li style="white-space: nowrap;"><a href="index.html">首頁</a></li>
                    <li style="white-space: nowrap;"><a href="#banner" >公益活動</a></li>
                    <li style="white-space: nowrap;"><a href="#features" >生態危機</a></li>
                    <li style="white-space: nowrap;"><a href="#footer" >關於</a></li>
                </ul>
            </nav>

        </div>

This is github page showed:

<div id="header" bis_skin_checked="1" style="background-image: none;">

            <!-- Inner -->
            <div  bis_skin_checked="1">
                <header>
                    <h1><a href="index.html" id="logo" bis_skin_checked="1">OceanCrisis</a></h1>
                    <hr>
                    <p>海洋危機</p>
                </header>
                <footer>
                    <a href="#main"  bis_skin_checked="1">閱讀</a>
                </footer>
            </div>

            <!-- Nav -->
            <nav id="nav">
                <ul>
                    <li style="white-space: nowrap;"><a href="index.html" bis_skin_checked="1">首頁</a></li>
                    <li style="white-space: nowrap;"><a href="#banner"  bis_skin_checked="1">公益活動</a></li>
                    <li style="white-space: nowrap;"><a href="#features"  bis_skin_checked="1">生態危機</a></li>
                    <li style="white-space: nowrap;"><a href="#footer"  bis_skin_checked="1">關於</a></li>
                </ul>
            </nav>

        </div>

main.css

/* Header */

#header {
    position: relative;
    background-image: url("../images/114645.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    padding: 7.5em 0 2em 0;
    cursor: default;
}

CodePudding user response：

Style defined in inline CSS overrides the one defined in external CSS.

Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page. If for an HTML tag, styles are defined in multiple style sheets then the below order will be followed.

• As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles.
• Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet.
• External style sheets have the least priority. If there are no styles defined either in inline or internal style sheet then external style sheet rules are applied for the HTML tags.

Source.

CodePudding user response：

#header {
    position: relative;
    background-image: url("./static/images/114645.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    padding: 7.5em 0 2em 0;
    cursor: default;
}

or

#header {
    position: relative;
    background-image: url("static/images/114645.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    padding: 7.5em 0 2em 0;
    cursor: default;
}

your directory structure:-

project > static >
        |        |- > css > main.css
        |        |        |- other css file
        |        |- > images > 114645.jpg
        |                    |- etc. images
        |
        |- index.html
        |- etc. file

• if you want to access than use ./static/images/114645.jpg" or static/images/114645.jpg