CSS image resize horizontally -


div.image {     background-image: url('http://www.seedsavers.org/site/img/seo%20images/0841-benarys-giant-zinnia-flower.jpg');     background-position: center;     background-repeat: no-repeat;     width: 500px;     height: 500px; } 

i use above css code diplay 500x500 image. shows on screen however, there way when resize window vertically image not resize @ (scrollbars appear) when resize window horizontally resize new width fit screen? thanks

dont specify width , height in px insted use %

div.image {     background-image: url('http://www.seedsavers.org/site/img/seo%20images/0841-benarys-giant-zinnia-flower.jpg');     background-position: center;     background-repeat: no-repeat;     width: 50%;     height: 50%; /* both want */ } 

or else use media query.


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -