시간과 공간 그리고 진실의 방

Example

Specify the size of a background image with "auto" and in pixels:

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The background-size property specifies the size of the background images.

There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).

Default value:Inherited:Animatable:Version:JavaScript syntax:

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property

CSS Syntax

background-size: auto|length|cover|contain|initial|inherit;

Property Values

ValueDescriptionPlay it

More Examples

Example

Specify the size of a background image with percent:

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 75% 50%;
}

Try it Yourself »

Example

Specify the size of a background image with "cover":

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

Try it Yourself »

Example

Specify the size of a background image with "contain":

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}

Try it Yourself »

Example

Here we have two background images. We specify the size of the first background image with "contain", and the second background-image with "cover":

#example1 {
  background: url(img_tree.gif), url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain, cover;
}

Try it Yourself »

Example

Use different background properties to create a "hero" image:

.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.wpfm-nav.wpfm-nav-show-hide{
display: block !important;
}

과

.wpfm-nav .wpfm-nav-show-hide{
display: block !important;
}

가 있다면 위의 2가지는 전혀 다른 CSS 의 양상을 보이게 된다.

특히 연속된 Class의 경우 wpfm-nav wpfm-nav-show-hide 와 같이 써져있는 경우가 있는데

이는 이어지는 Class 속성이므로 반드시 붙여서 쓰도록 해야 적용이된다.

-1

1

i have a navigation bar that sticks to the top of the page as the user scrolls, however as the user continues to scroll down the page, the navigation menu seems to disappear behind some of the pages elements. any help with this matter will be greatly appreciated, below is all the code.

* { margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; } p, h5 { margin-bottom: 10px; line-height: 1.5; } h5 { text-align: center; border: 1px solid #ccc; border-width: 1px 0; } h5.fixed { position: fixed; top: 80px; left: 0; background-color: #fff; right: 0; } .nav a { text-decoration: none; color: #fff; display: block; transition: .3s background-color; } .nav a:hover { background-color: #005f5f; } .nav a.active { background-color: #fff; color: #444; cursor: default; } /* Option 1 - Display Inline */ .nav li { display: inline-block; margin-right: -4px; } <h5> <div class="nav"> <ul> <li class="home"><a href="#">Home</a></li> <li class="tutorials"><a class="active" href="#">Tutorials</a></li> <li class="about"><a href="#">About</a></li> <li class="news"><a href="#">Newsletter</a></li> <li class="contact"><a href="#">Contact</a></li> </ul> </div> </h5>

 Run code snippet

Expand snippet

html css

shareimprove this question

edited Dec 20 '15 at 17:28

asked Dec 20 '15 at 17:08

Josh

46210

•  

  C'mon heading element can only contain inline elements – Roko C. Buljan Dec 20 '15 at 17:14

add a comment

4 Answers

activeoldestvotes

2

There are few issues in you code. I could not understand why you using h5 in fixed div. To solve issue try this

h5.fixed { position: fixed; top: 80px; left: 0; background-color: #fff; right: 0; z-index:999; }

But my suggestion is use some better way to implement fixed top menu. Please check this example https://getbootstrap.com/examples/navbar-fixed-top/

shareimprove this answer

answered Dec 20 '15 at 17:20

Manish Shukla

1,1722721

•  

  This solved my problem! works perfectly, thank you and ill take your advice on board and look into that. Thank you again! – Josh Dec 20 '15 at 17:31

https://stackoverflow.com/questions/34383547/how-to-bring-navigation-div-to-the-front

CSS의 미디어 쿼리 @media를 작성하는 경우 웹페이지에서 두가지 코드 타입을 볼 수 있습니다. 바로 @media screen 그리고 @media only screen입니다. 과연 이 둘의 차이점은 무엇이고 왜 다르게 사용하는 걸까요? 그 이유에 대하여 알아보고자 합니다.

# Example 1

@media screen (min-width: 1024px) {
   color: #000;
}

# Example 2

@media only screen (min-width: 1024px) {
   color: #fff;
}

! @media only screen과 @media screen의 차이점먼저 해당하는 두 코드를 사용했을때 각각의 화면에 나타나게 될 결과는 동일합니다. 하지만 차이점은 무엇일까요? 이 부분에 대하여 only 키워드를 사용한 경우 w3c에 따르면 예전의 user agents를 사용된 스타일 시트가 보이지 않도록 하는 역할을 한다고 합니다. 뭔가 클리어 하지는 않지만 결론은 최근에 사용되는 환경에서 only를 사용하는 것과 사용하지 않는 것 문제가 발생되지 않습니다. 구 user agent 환경의 media 속성을 감추는... 즉 적용되지 않게 하는 것이 바로 only의 목적이라 볼 수 있습니다.