How to be compatible with different resolutions in HTML / CSS? -


there several different monitor types, therefore webpage need compatible lot of different screen resolutions. use 4k monitors nowadays of background images still "only" hd. not problem facing. important is, how know resolution of used monitor is, using html or css? if set hd background page , uses 4k monitor open site, he/she see background's bottom , therefore empty part of webpage under background image, not nice. possible solutions problem?

i think you're looking achievable through css, via media queries. allows style html different screen resolutions. syntax easy understand too.

one of ways use these media queries within css file. here's example below.

/*this screen types guess*/ body{     background-image: url('img/large-background.jgp');  /*this target screens max width of 768px i.e. tablets*/ @media (max-width: 768px) {     body {         background: url('img/less-large-background-for-devices.jpg');     } } 

also @ these docs, comprehensive , easy understand. give more details , other ways of targeting different screens using css.


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? -