브라우저 뷰포트 크기에 따라 배경 이미지가 늘어나거나 줄어들기를 원합니다.
스택 및 오버플로에서 CSS 배경 늘이기 및 크기 조정과 같은 작업을 수행하는 몇 가지 질문을 보았습니다. 잘 작동하지만 '이미지' 태그가 아닌 '배경'을 사용하여 이미지를 배치하고 싶습니다.
여기에는 img
태그가 배치된 다음 CSS를 사용하여 img
태그에 경의를 표합니다.
width:100%; height:100%;
작동하지만 그 질문은 약간 오래된 질문이며 CSS 3에서 배경 이미지의 크기를 조정하는 것이 꽤 잘 작동한다고 명시되어 있습니다. 저는 이 첫 번째 예제를 시도해 보았지만 잘 되지 않았습니다.
배경 이미지` 선언을 사용하는 좋은 방법이 있나요?
앞서 언급한 코드를 사용하여...
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
이렇게 하면 배경은 스크롤되지 않고 콘텐츠만 스크롤되는 원하는 효과를 얻을 수 있습니다.
배경 이미지는 모든 화면 크기에 맞게 브라우저 뷰포트에 맞게 크기가 조정됩니다. 콘텐츠가 브라우저 뷰포트에 맞지 않아 사용자가 페이지를 스크롤해야 하는 경우 콘텐츠가 스크롤되는 동안 배경 이미지는 뷰포트에 고정된 상태로 유지됩니다.
CSS 3를 사용하면 이 작업이 훨씬 쉬워질 것 같습니다.
이 무중단으로 나는한다 각 페이지마다. 그러므로 내가 PHP 를 사용하여 각 페이지의 HTML 태그 자체 발령합니다. # 39, & # 39 의 모든 사진들은 image&. # 39, & # 39, 폴더 및 끝나는 Bg.jpg&.
<html style="
background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\');
-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>
배경 그림을 하나씩입니다 경우 모든 페이지에 대해 '$ 를 제거할 수 있습니다 다음, 이 코드의 배치하십시오 백슬래시 탈출이라니요 제거하시겠습니까 pic' 가변으로 조정하십시오 경로 및 사용자 css 파일.
html{
background: url(images/homeBg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}
이 테스트되었습니다 Internet& Explorer&, 구글 크롬, 파이어폭스, 21,, 빨리 빨리 함께 9. 14.
이는 CSS 에서 요령을 설명했다. 완벽한 전체 페이지 배경 이미지를
데모: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
코드:
body {
background: url(images/myBackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
이 class 를 CSS 파일에 추가할 수 있습니다.
.stretch {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
작동하잖아 위치:
[2]: http://en.wikipedia.org/wiki/Opera_% 28web_browser% 29
이미지 크기를 적절히 사용하여 컨테이너입니다 확장하십시오 위해 기준으로 다음과 같다.
background-size: contain;
background-repeat: no-repeat;
이를 통해 내가 사용하는 작동하잖아 모든 브라우저:
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
</html>
I agree 이미지와 함께 div 100% 를 절대 폭과 높이를. 폭과 높이를 몸에 합니다 100% 로 설정하고 여유폭 CSS 및 여백을 제로. 이 방법을 사용하는 것은 다른 문제로 너회가 발견하리니 배경 이미지를 구축할 수 있는 텍스트 선택 영역을 선택할 때, 가끔 효과를 가지고 있으며, 전체 페이지를 만들고 불행한 선택한 상태. 이 때문에 ',' CSS 규칙을 사용하여 같은 사용자 선택 없음 라운드하지 얻을 수 있습니다.
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
빨리 다시 internet&, 여기서 알 수 있기 때문에, 나쁜 남자, explorer 는 doesn& 사용자 선택 옵션 - t # 39 를 찾지 못하고 있다 [internet& explorer& 빨리, 빨리,, 10] [1] 는 것을 방지하기 위해 미리 보기 때문에, 이 중 하나를 선택할 수 있습니다 javascript 를 사용하여 배경 이미지를 선택물 (예: http://www.felgall.com/jstip35.htm) 또는 using [css 3] [2] 스트레치한 배경 메서드입니다.
또한 서 꼭 이래야겠어요 동일팔레트에 배경 이미지를 페이지 하단에 신앙이니라 배경 이미지를 시간이 오래 걸리는 로드하기에 (즉, 흰색 배경으로 처음), 페이지 맨 위로 이동할 수 있습니다.
[1]: http://en.wikipedia.org/wiki/Internet_Explorer_11 # Internet_Explorer_10 [2]: http://en.wikipedia.org/wiki/Cascading_Style_Sheets # CSS_3
감사합니다!
그런데 이 것은 working for the 구글 크롬 및 [사파리] [2] 브라우저 (스트레치할 협력했습니다 사진이 있지만, mm, 높이 불과 2& 빨리!) 어떤 사람이 날 때까지 부족하다 "고 말했다.
>. 최소 높이, 높이: 100%, '자동' 설정해 봅니다.
그래서 변화의 단축시킵니다 세로폭: 100%, '선' 은:
#### #background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:auto;
min-height:100%;
}
그 직전 이 새로 추가된 코드 나는 내 드루팔 텐두 테마 '스티레이크스':
>. html, 바디입니다 100%,} {높이: >. # # # ffffff; 페이지 {배경: 최소 높이, 두께: 100%, 높이: 자동! 중요한: 100%, 포지셔닝하십시오 상대치.}:
그럼 내가 해야 할 때 새 블록 내에 있는 'class = 스트레치하는 추가 드루팔 사진':
>. # <. img alt = " "; class = " stretch"; src = " pic.url"; />.
그냥 사진이 있는 doesn& # 39, 복사 편집기에는 드루팔 블록이어야 빗나갔다. 이 제품을 변경하십시오 텍스트 편집기를 비 포맷.
[2]: http://en.wikipedia.org/wiki/Safari_% 28web_browser% 29
내가 하고 싶은 센터 및 확장성으로 배경 이미지를 스트레치할 redhat. 없이 전체 페이지, 내가 원하는 화면 비율을 유지할 수 있다. 이 덕분에 다른 변형은 제안됩니다 가져다줄래요 협력했습니다 대답:
인라인 이미지: -
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS -
html {
height:100%;
}
#background {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
margin: auto;
height:100%;
}
내가 예전에는 이상적인 조합을 배경 x css 속성을 충족합니다 ns500 배경 이미지입니다.
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
이 때, 현재도 배경이 항상 빽이라는 전체 브라우저 창을 중심으로 ns500.
이 경우 '속성' 국경 이미지 스타일시트가 어딘가에 있는 # 39 는 매우 유용한 구현됩니까 doesn& css&, t 지원, nbsp, 3. 구글 크롬, Firefox 를 사용하는 경우, 그 때 나는 추천합니까 크기 빽이라는 배경 '속성' 할 수 있다.