Css Multiple backgrounds Responsive
-
Hi,
I have a big div with several backgrounds sequentially positionned. All is ok while I am on a full/big screen display but when it comes to small screens it’s kindda broken.
You can see in the following URL that the last background is cropped when resizing. As an helper I put some special lines and pixels on some images (the first one as it’s Left Top corner first pixels in red and a line is drawn on its bottom | the last bg image has its Right Bottom corner highlighted in red, blue and green).
You can find the CodePen example :
HereHere is the HTML code :
<!DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="theme-color" content="#000000" /> <link href="./css/style.css" rel="stylesheet" type="text/css" media="screen"/> <title>Home</title> <style type="text/css"> #page{background-color: transparent;} </style> </head> <body> <header id="header"> </header> <section id="page"> <section> <map name="fullgridMap" id="fullgridMap"> </map>
</div>
</section>
</section>
<footer id="footer">
</footer>
</body>
</html>And the CSS (style.css) :
/*********************************************************************************/ /* UIKIT COMPUTED STYLE */ /*********************************************************************************/ html { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: #fff; color: #666; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; } audio, canvas, img, video { max-width: 100%; height: auto; box-sizing: border-box; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } /*********************************************************************************/ /* CUSTOM STYLE */ /*********************************************************************************/ :root{ --tc-orange: #FF3831; --tc-light-orange: #FF7456; --tc-blue: #1698FF; --tc-light-blue: #62BAFF; --tc-red: #CC2B26; --tc-normal-grey: #404040; --tc-dark-grey: #212121; --tc-light-grey: #3D3D3D; --tc-black: #000000; --tc-white: #FFFFFF; --tc-yellow: #FFC439; } @viewport{ zoom: 1.0; width: extend-to-zoom; } @-ms-viewport{ width: extend-to-zoom; zoom: 1.0; } html,body{ width: 100%; } html{ line-height: normal; background: none; } body{ color:var(--tc-normal-grey); background-image: url("http://p3291.phpnet.org/test/images/maa_bg_top.png"), url("http://p3291.phpnet.org/test/images/maa_bg.png"), url("http://p3291.phpnet.org/test/images/background_pattern.png"); background-position: center top, center 110px, left top; background-repeat: no-repeat, no-repeat, repeat; background-attachment: fixed, fixed, fixed; background-size: auto 107px, 100%, auto; } #page{ max-width: 1200px;min-height:680px;margin:0 auto 0 auto; background-color: var(--tc-white); } #page section{padding:0 15px 0 15px;} div#grid { position:relative;z-index:98;max-width:1000px;background:url('http://p3291.phpnet.org/test/images/block.png');background-size: 10px;margin: 0 auto 0 auto;background-size: 1% auto;} #fullgrid{ position:relative; top:0; left:0; border-style:none; margin: 0 auto 0 auto; width:100%; height:auto; z-index:100; background: url('http://p3291.phpnet.org/test/images/fullgrid_01.png') 0px 0px, url('http://p3291.phpnet.org/test/images/fullgrid_02.png') 0px 99px, url('http://p3291.phpnet.org/test/images/fullgrid_03.png') 0px 199px, url('http://p3291.phpnet.org/test/images/fullgrid_04.png') 0px 299px, url('http://p3291.phpnet.org/test/images/fullgrid_05.png') 0px 399px, url('http://p3291.phpnet.org/test/images/fullgrid_06.png') 0px 499px, url('http://p3291.phpnet.org/test/images/fullgrid_07.png') 0px 599px, url('http://p3291.phpnet.org/test/images/fullgrid_08.png') 0px 699px, url('http://p3291.phpnet.org/test/images/fullgrid_09.png') 0px 799px, url('http://p3291.phpnet.org/test/images/fullgrid_10.png') 0px 899px, url('http://p3291.phpnet.org/test/images/fullgrid_11.png') 0px 999px, url('http://p3291.phpnet.org/test/images/fullgrid_12.png') 0px 1099px, url('http://p3291.phpnet.org/test/images/fullgrid_13.png') 0px 1199px, url('http://p3291.phpnet.org/test/images/fullgrid_14.png') 0px 1299px, url('http://p3291.phpnet.org/test/images/fullgrid_15.png') 0px 1399px, url('http://p3291.phpnet.org/test/images/fullgrid_16.png') 0px 1499px, url('http://p3291.phpnet.org/test/images/fullgrid_17.png') 0px 1599px, url('http://p3291.phpnet.org/test/images/fullgrid_18.png') 0px 1699px, url('http://p3291.phpnet.org/test/images/fullgrid_19.png') 0px 1799px, url('http://p3291.phpnet.org/test/images/fullgrid_20.png') 0px 1899px, url('http://p3291.phpnet.org/test/images/fullgrid_21.png') 0px 1999px, url('http://p3291.phpnet.org/test/images/fullgrid_22.png') 0px 2099px, url('http://p3291.phpnet.org/test/images/fullgrid_23.png') 0px 2199px, url('http://p3291.phpnet.org/test/images/fullgrid_24.png') 0px 2299px, url('http://p3291.phpnet.org/test/images/fullgrid_25.png') 0px 2399px, url('http://p3291.phpnet.org/test/images/fullgrid_26.png') 0px 2499px, url('http://p3291.phpnet.org/test/images/fullgrid_27.png') 0px 2599px, url('http://p3291.phpnet.org/test/images/fullgrid_28.png') 0px 2699px, url('http://p3291.phpnet.org/test/images/fullgrid_29.png') 0px 2799px, url('http://p3291.phpnet.org/test/images/fullgrid_30.png') 0px 2899px, url('http://p3291.phpnet.org/test/images/fullgrid_31.png') 0px 2999px, url('http://p3291.phpnet.org/test/images/fullgrid_32.png') 0px 3099px, url('http://p3291.phpnet.org/test/images/fullgrid_33.png') 0px 3199px, url('http://p3291.phpnet.org/test/images/fullgrid_34.png') 0px 3299px, url('http://p3291.phpnet.org/test/images/fullgrid_35.png') 0px 3399px, url('http://p3291.phpnet.org/test/images/fullgrid_36.png') 0px 3499px, url('http://p3291.phpnet.org/test/images/fullgrid_37.png') 0px 3599px, url('http://p3291.phpnet.org/test/images/fullgrid_38.png') 0px 3699px, url('http://p3291.phpnet.org/test/images/fullgrid_39.png') 0px 3799px, url('http://p3291.phpnet.org/test/images/fullgrid_40.png') 0px 3899px; background-repeat: no-repeat; background-size: auto auto; } img#overlay:hover{cursor:pointer;} img#overlay{border-style:none;margin: 0 auto 0 auto;width:1000px;z-index:101;} @media only screen and (min-width: 1200px) { #header, #footer{ padding-left: calc(50% - 600px); padding-right: calc(50% - 600px); margin: 0; } } @media only screen and (min-width: 1077px) { #grid, #fullgrid{height:4000px;} } /*@media only screen and (max-width: 736px) {*/ @media only screen and (max-width: 675px) { /* iPhone 8+ Portrait */ body{font-size:1.5rem;font-family: 'Roboto', sans-serif;} #fullgrid{width:100%;margin:0; padding:0;} #header,#footer,#page,#grid,#blinker,div#grid:after{overflow:visible; width:100%!important;} #page h1{display:none;} #page section { padding: 0; } }The blog I need help with is: (visible only to logged in users)
-
hi,
Your website is not hosted on WordPress.com.
If you are unsure who your hosting company is, you can check your site at https://www.whoishostingthis.com.We’re able to help only with websites hosted on WordPress.com.
To clear up any confusion, there are 2 versions of WordPress. WordPress.com is a managed environment different from using the open source WordPress installation. WordPress.com and WordPress.org are two, different entities.
You could look in this forum; perhaps someone there has experienced something similar:
https://wordpress.org/support/You’ll need a free WordPress.org account to post – if you don’t already have one, you can register here:
https://wordpress.org/support/register.phpYour hosting provider customer support may also be able to help you.
Hope this helps
- The topic ‘Css Multiple backgrounds Responsive’ is closed to new replies.
WordPress.com Forums 