How to properly implement the download background on the site with compliance with the extension of the visitorβs monitor?
That is, select the desired image for a specific extension.
Php site
- onecss lessons to help - Oleg Shleif
- Probably still depending on the size of the browser window? - rjhdby
- different styles in zafivismosty from width / height / orientation - Arnial
- You will have to store these pictures in several options. And depending on the width of the browser, upload the appropriate one - Vanya Avchyan
|
3 answers
I think this will help media queries.
body { background-image: url("http://www.fullhdoboi.com/wallpapers/thumbs/6/kartinka-apelsiny-1885.jpg"); background-repeat: no-repeat; background-size: cover; } @media (max-width: 960px) { body { background-image: url("http://www.sunhome.ru/i/wallpapers/200/planeta-zemlya-kartinka.960x540.jpg"); } } 
Roman Kruglov Roman Kruglov
324 one 6
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Π Π°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠΎΠ½</title> <style> body { background: url(images/ΡΠΎΠ½.png) no-repeat; /* ΠΠ°Ρ ΡΠΎΠ½ ΡΡΡ */ -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ ΠΈ Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ */ } </style> </head> <body> </body> </html> When using background-size: 100% the background will occupy the entire width of the window (not the screen)
Apple Vine Apple Vine
3 four
|
corrected tags, here all the same basically JavaScript is needed, since php is a server technology.
For example, output to php js an object or you can output as an attribute, for example, as an attribute:
<div class="bg" data-bg="Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΠΊΠΈ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ" data-bg-lg="ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΎΡ 1200 ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ" data-bg-md="ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΎΡ 970"></div> this way it is possible for any permissions, and then on js handler, I will write using jQuery, the logic should be clear anyway
$(window).on("load resize scroll",function(e){ var width = $(window).width(), $blockBg = $('.bg'), image = $blockBg.attr('data-bg'); if(width > 970 && width < 1200) { image = $blockBg.attr('data-bg-md'); } if(width > 1200) { image = $blockBg.attr('data-bg-lg'); } $blockBg.css('background', 'url('+image+')'); } 
maxkrasnov maxkrasnov
2,903 6 18
- The Apple Vine version is also correct, but it happens that at different resolutions the images should not change much due to the content area, etc. - maxkrasnov
|