Sunday 15 August 2010

css - how to resize the web page when the browser window is re-sized? -


This background image in my website is working on slideshow. But I also need this for the body too. Can anyone help me?

  .cb - slideshow li span {width: 100%; Height: 100%; Status: Completed; Top: 0 pixels; Left: 0 pixels; Color: Transparent; Background size: cover; Background-position: 50% 50%; Background-Repeat: None; Opacity: 0; Z-index: 0; Webkit-Backfiest-Visibility: hidden; Webkit-Animation: Image Animation 36S Linear Infinite 0S; -moz - animation: image animation 36 s linear infinite 0s; -o-animation: image animation 36 s linear infinite 0s; -MMS-Animation: Image Animation 36S Linear Infinite 0S; Animation: Image Animation 36S Linear Infinite 0S; }   

If you want to resize your page, the media question (only the modern browser Support it) - or you can choose to use javascript (the third option is both), however your question indicates that you want to avoid javascript. I have given an example below with the questions of the media, when your screen size is between 800px and 1000px then CSS will be implemented. You can add a statement, as if you use only the minimum or the maximum at that time.

  @ Media all and (max-width: 1000px) and (minimum width: 800 px) {.cb - slideshow li span {/ * css here}}}   

You can change any element with media queries. It is commonly used to create a responsive design.

No comments:

Post a Comment