CSS 배경 늘리기 및 크기 조정

CSS 배경 늘리기 및 크기 조정

---

컨테이너를 채우기 위해 CSS의 배경을 늘리거나 확장하는 방법이 있습니까?

---

최신 브라우저의 경우 다음을 사용하여이를 수행 할 수 있습니다 background-size.

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover 이미지를 수직 또는 수평으로 늘려서 타일 / 반복하지 않는 것을 의미합니다.

Safari 3 이상, Chrome, Opera 10 이상, Firefox 3.6 이상 및 Internet Explorer 9 이상에서 작동합니다.

Internet Explorer의 하위 버전에서 작동하려면 다음 CSS를 사용해보세요.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

---

CSS 3 속성을 사용합니다 background-size.

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

2012 년부터 최신 브라우저에서 사용할 수 있습니다.

---

CSS로 이미지 크기를 조정하는 것은 불가능하지만 다음과 같은 방식으로 비슷한 효과를 얻을 수 있습니다.

이 마크 업 사용 :

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

다음 CSS로 :

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

그리고 당신은 완료되어야합니다!

이미지의 크기를 "풀 블리드"로 조정하고 종횡비를 유지하려면 대신 다음을 수행 할 수 있습니다.

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

꽤 잘 작동합니다! 그러나 한 차원이 잘 리면 양쪽이 고르게 잘리지 않고 이미지의 한 면만 잘립니다. Firefox, Webkit 및 Internet Explorer 8 에서 테스트했습니다 .

---

CSS3에서 background-size 속성 을 사용하십시오 .

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

편집 : Modernizr 는 배경 크기 지원 감지를 지원 합니다. 작동하도록 작성된 JavaScript 해결 방법을 사용할 수 있지만 필요하고 지원이 없을 때 동적으로로드 할 수 있습니다. 이렇게하면 특정 브라우저에 대해 침입적인 CSS 해킹에 의존하지 않고도 코드를 유지 관리 할 수 ​​있습니다.

Personally I use a script to deal with it using jQuery, its an adaption of imgsizer. As most designs I do now use width %'s for fluid layouts across devices there is a slight adaptation to one of the loops (accounting for sizes that aren't always 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDIT: You may also be interested in jQuery CSS3 Finaliz[s]e.

---

Try the article background-size. If you use all of the following, it will work in most browsers except Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

---

Not currently. It will be available in CSS 3, but it will take some time until it's implemented in most browsers.

---

.style1 {
        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;
}

Works in:

• Safari 3+
• Chrome Whatever+
• IE 9+
• Opera 10+ (Opera 9.5 supported background-size but not the keywords)
• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

In addition you can try this for an ie solution

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Credit to this article by Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

---

In one word: no. The only way to stretch an image is with the <img> tag. You'll have to be creative.

This used to be true in 2008, when the answer was written. Today modern browsers support background-size which solves this problem. Beware that IE8 doesn't support it.

---

Define "stretch and scale"...

If you've got a bitmap format, it's generally not great (graphically speaking) to stretch it and pull it about. You can use repeatable patterns to give the illusion of the same effect. For instance if you have a gradient that gets lighter towards the bottom of the page, then you would use a graphic that's a single pixel wide and the same height as your container (or preferably larger to account for scaling) and then tile it across the page. Likewise, if the gradient ran across the page, it would be one pixel high and wider than your container and repeated down the page.

Normally to give the illusion of it stretching to fill the container when the container grows or shrinks, you make the image larger than the container. Any overlap would not be displayed outside the bounds of the container.

If you want an effect that relies on something like a box with curved edges, then you would stick the left side of your box to the left side of your container with enough overlap that (within reason) no matter how large the container, it never runs out of background and then you layer an image of the right side of the box with curved edges and position it on the right of the container. Thus as the container shrinks or grows, the curved box effect appears to shrink or grow with it - it doesn't in fact, but it gives the illusion that is what's happening.

As for really making the image shrink and grow with the container, you would need to use some layering tricks to make the image appear to function as a background and some javascript to resize it with the container. There's no current way of doing this with CSS...

If you're using vector graphics, you're way outside my realm of expertise I'm afraid.

---

This is what I've made of it. In the stretch class, I simply changed the height to auto. This way your background picture has always got the same size as the width of the screen and the height will allways have the right size.

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

---

Add a background-attachment line:

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

---

I would like to point out that this is equivalent to doing:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

---

Another great solution for this is Srobbin's Backstretch which can be applied to the body or any element on the page - http://srobbin.com/jquery-plugins/backstretch/

---

Try this

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

---

An additional tip for SolidSmile's cheat is to scale (the proportionate re-sizing) by setting a width and using auto for height.

Ex:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

---

Use the border-image : yourimage property to set your image and scale it upto the entire border of your screen or window .

참고URL : https://stackoverflow.com/questions/376253/stretch-and-scale-css-background