* Programming/HTML&CSS

[HTML/CSS] 상단 이미지 고정하기

고경a 2016. 9. 22. 20:53

소스

* position: fixed; 가 고정하는 기능을 한다.

* background-repeat: no-repeat; 는 이미지의 중복되는 것을 막아준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        #bar{
            border: 1px red solid;
        }
        img{
            width: auto;
            height: 80px;
        }
        #img01{
            position: fixed;
            background-color: aquamarine;
            width: 100%;
            height: 250px;
            background-image: url(uuu.jpg);
            /*background-size: 50%;*/
            background-repeat: no-repeat;
            /*background-attachment: fixed;*/
        }
    </style>
</head>
<body>
<!--    <img alt="" src="googlelogo.png" />
    <div id="bar"> </div>-->
    <div id="img01">다음의 이미지는 로고</div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
cs


결과

스크롤을 내려도 따라오는것을 알수있다.


저작자표시 비영리 변경금지