Geek asks and answers

Fluid background when resizing the browser

I want to achieve the effect of a background image of a liquid, which you can see on this web page: http://217.116.9.130/test2.html (taken from zara.com)

If you resize your browser to the left, then the size on the image in the image on the left will change. I took the code from zara.com, but I suspect the effect is in a language that I don’t know.

Does anyone know and can give a hint (or pass me a link) on how to do this using jquery, css, ajax or php?

Thank you so much

+3
source share
5 answers

You may be looking for the following: http://css-tricks.com/perfect-full-page-background-image/

, .

+4

css3 cover.

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

http://css-tricks.com/perfect-full-page-background-image/

+3

css

background-position: center center;


center top
center bottom
left top

....

0

onResize, Javascript, , CSS .

: id="fullImage"

javascript left:; css.

left .

:

var el = document.getElementById(fullImage),
width = window.innerWidth,
imageWidth = [width of image here];
window.onresize = function() {
  el.style.left = imageWidth - width + "px";
}
0
source

For example, if your background image is contained in the body tag, then CSS should contain the purpose of the background image, and then include:

top: 0;
bottom: 0;
left: 0;
right: 0;

This path — when the window is resized — the background immediately changes with it. The same principle for providing overlays for modal dialogue.

0
source

More articles:


All Articles