{"id":115,"date":"2021-01-13T16:02:36","date_gmt":"2021-01-13T13:02:36","guid":{"rendered":"https:\/\/ismailenesayhan.com\/?p=115"},"modified":"2024-02-24T16:44:12","modified_gmt":"2024-02-24T13:44:12","slug":"tam-ekran-arkaplan-resimleri-icin-mobil-uyumluluk","status":"publish","type":"post","link":"https:\/\/ismailenesayhan.com\/en\/tam-ekran-arkaplan-resimleri-icin-mobil-uyumluluk\/","title":{"rendered":"Mobile Compatibility for Full Screen Background Images"},"content":{"rendered":"<section class=\"l-section wpb_row height_medium\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_flex valign_top type_default stacking_default\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p>When designing mobile-friendly web pages, I usually prefer to fill the backgrounds with images, colour transitions and videos.<\/p>\n<p>When I want to put a full screen image in the background, height: 100%; I take advantage of the flexibility feature of the css code.<\/p>\n<p class=\"translation-block\"><strong>Problem:<\/strong><br>\nWhile there is no problem on desktop devices, when the page scrolls down on mobile devices, the address bar (toolbar) is hidden and 10% more space is added to the page.<\/p>\n<p>The picture that covers 100% of the background, suddenly jumps, narrows and a white space appears in the lower area, I have examined many websites, they preferred to leave this problem as it is.<\/p>\n<\/div><\/div><div class=\"w-separator size_medium\"><\/div><div class=\"w-image align_center\"><div class=\"w-image-h\"><img decoding=\"async\" width=\"948\" height=\"1024\" src=\"https:\/\/ismailenesayhan.com\/wp-content\/uploads\/2024\/02\/mobil-sorun2-948x1024.jpg\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/ismailenesayhan.com\/wp-content\/uploads\/2024\/02\/mobil-sorun2-948x1024.jpg 948w, https:\/\/ismailenesayhan.com\/wp-content\/uploads\/2024\/02\/mobil-sorun2-278x300.jpg 278w, https:\/\/ismailenesayhan.com\/wp-content\/uploads\/2024\/02\/mobil-sorun2.jpg 1400w\" sizes=\"auto, (max-width: 948px) 100vw, 948px\" \/><\/div><\/div><div class=\"w-separator size_medium\"><\/div><div class=\"w-image align_center\"><div class=\"w-image-h\"><img decoding=\"async\" width=\"948\" height=\"1024\" src=\"https:\/\/ismailenesayhan.com\/wp-content\/uploads\/2024\/02\/mobil-sorun-948x1024.jpg\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/ismailenesayhan.com\/wp-content\/uploads\/2024\/02\/mobil-sorun-948x1024.jpg 948w, https:\/\/ismailenesayhan.com\/wp-content\/uploads\/2024\/02\/mobil-sorun-278x300.jpg 278w, https:\/\/ismailenesayhan.com\/wp-content\/uploads\/2024\/02\/mobil-sorun.jpg 1400w\" sizes=\"auto, (max-width: 948px) 100vw, 948px\" \/><\/div><\/div><div class=\"w-separator size_medium\"><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p class=\"translation-block\">Solution:<br>\nUsing viewport units offers many solutions for flexible views on mobile devices.<\/p>\n<p><a href=\"https:\/\/bbg0x.medium.com\/css-yeni-viewport-vw-vh-vmin-birimleri-b6f9b1e92d3f\" target=\"_blank\" rel=\"noopener\">https:\/\/bbg0x.medium.com\/css-yeni-viewport-vw-vh-vmin-birimleri-b6f9b1e92d3f<\/a><\/p>\n<p>height: 100vh; You can solve the jump and white space problem by using the code as follows.<\/p>\n<\/div><\/div><div class=\"w-separator size_medium\"><\/div>\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element us_custom_909b2fd0\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<script src=\"https:\/\/gist.github.com\/ismailenesayhan\/3c5b3582cf5af2862a681cee8c57714f.js\"><\/script>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/section>","protected":false},"excerpt":{"rendered":"Mobil uyumlu web sayfalar\u0131 tasarlarken genellikle arkaplanlar\u0131 resimler, renk ge\u00e7i\u015fleri ve videolar ile doldurmay\u0131 tercih ediyorum. Arkaplana tam ekran resim koymak istedi\u011fimde height: 100%; css kodunun esneklik \u00f6zelli\u011finden faydalan\u0131yorum. Sorun: Masa\u00fcst\u00fc cihazlarda sorun ya\u015famazken mobil cihazlarda sayfan\u0131n a\u015fa\u011f\u0131 kaymas\u0131 (scroll) durumunda yukar\u0131da bulunan adres \u00e7ubu\u011fu (toolbar) gizleniyor sayfaya 10% bir alan daha ekleniyor. 100% arkaplan\u0131...","protected":false},"author":2,"featured_media":146,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_wp_rev_ctl_limit":""},"categories":[8],"tags":[],"class_list":["post-115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-tasarim"],"acf":[],"_links":{"self":[{"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/posts\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":4,"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/posts\/115\/revisions"}],"predecessor-version":[{"id":145,"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/posts\/115\/revisions\/145"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/media\/146"}],"wp:attachment":[{"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/media?parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/categories?post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ismailenesayhan.com\/en\/wp-json\/wp\/v2\/tags?post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}