본문 이미지의 크기를 조정하는 방법

전체 페이지를 차지하지 않도록 본문 이미지의 크기를 조정하려고합니다. 크기를 어떻게 조정합니까? 이미지 URL을 표시하도록 코드가 확실하지 않습니다. 공백이 최대 높이를 선언하는 이미지 아래에 표시되도록하고 페이지를 확장하지 않도록합니다. 본문 이미지의 크기를 조정하는 방법

body { 
 
    background-image: url(C:/Users/Gabriel/Downloads/Green-blur.jpg); 
 
    background-repeat: none; 
 
    font-family: "PT Sans", sans-serif; 
 
}

<body> 
 

 
    <div class="container-fluid"> 
 

 
    <ul id="nav"> 
 
     <li id="brand"><a href="#">MINIMAL</a></li> 
 
     <li id="navm"><a href="#">Men</a></li> 
 
     <li id="navm"><a href="#">Women</a></li> 
 
     <li id="navm"><a href="#">Contact</a></li> 
 
    </ul> 
 

 
    </div> 
 

 
    <div> 
 
    <h1>Simplicity is Minimal</h1> 
 
    </div> 
 

 
    <div id="home"> 
 
    <a href="#" id="homeb">Shop Now</a> 
 
    </div> 
 

 
</body>

배경 반복으로 고정 : 없음;

출처

2017-03-21 RogerFedFan

이미지에서 차지하려는 비율이 어느 정도인지 잘 모르겠습니다. https://www.w3schools.com/cssref/css3_pr_background-size.asp – Rowland

은 당신의 몸이 CSS 규칙을 사용해보십시오 : 배경 크기의 값이 아니라 백분율 값으로 선언 할 수

body { 
    background: url(C:/Users/Gabriel/Downloads/Green-blur.jpg); 
    font-family: "PT Sans", sans-serif; 
    background-size: 69px 54px; // with the first value being the width; second value the height 
    // following rules are optional, don't know if you need them in your case 
    // background-position: center; 
    // background-repeat: no-repeat; 
}

하는 것으로. 그리고 페이지에 어딘가 특정의 이미지 시작하자하려는 경우, 당신은

출처

2017-03-21 14:46:10

작동하지만 어떤 일이 일어나더라도 화면 전체를 계속해서 늘리거나 반복합니다. – RogerFedFan

@ 가브리엘 포조 그 이유는 "background-repeat : no-repeat; ", 이렇게하면 배경 이미지가 한 번만 렌더링됩니다 (말한 것처럼 번식하지 않습니다). –

근무 아닌지

background-position: top right; // default is top left

당신이이 코드를 추가 할 수 있습니다 알려 주시기 사용할 수 있습니다 당신의 몸 스타일 CSS로

background-size: 100px 200px; // first value difines width and second value, height

출처

2017-03-21 15:00:08

이것을 사용하려고하면 반드시 도움이 될 것입니다.

body { 
    background-image: url(C:/Users/Gabriel/Downloads/Green-blur.jpg); 
    background-size: 50% 80%; // you can change % value as per your requirement 
    font-family: "PT Sans", sans-serif; 
}

출처

2017-03-21 16:44:37

예, 이미지는 복제되고 반복되기 시작합니다. 이 문제를 어떻게 해결할 수 있습니까? – RogerFedFan

여기에 속성을 하나 더 추가 할 수 있습니다. 'background-repeat : no-repeat; ' 희망이 당신을 위해 일하기를 바랍니다. –

본문 이미지의 크기를 조정하는 방법

답변

관련 문제