html - Left & Right Background CSS in div changes body content container width -
i put display background on left , right side of website.
now in place body container appearing wider before. why be?
can see isn't code in below?
div#multi-background { width: 100%; height: 100%; background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png); background-position: center right, top left; background-repeat: no-repeat; } @media screen , (min-width: 481px) { //happens when screen size >= 481px div#multi-background { width: 100%; height: 100%; background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png); background-position: center right, top left; background-repeat: no-repeat; } } @media screen , (max-width: 481px) { //happens when screen size <= 481px div#multi-background { background-image: none; } }
if got right, code want:
#multi-background { height: 700px; background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png); background-position: center right, top left; background-repeat: no-repeat; } @media screen , (min-device-width: 481px) { /*happens when screen size bigger 481px */ #multi-background { width: 100%; background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png); background-position: center right, top left; background-repeat: no-repeat; } } @media screen , (max-device-width: 481px) { /*happens when screen size lower 481px*/ #multi-background { background-image: none; } }
<body><div id="multi-background"></div>
the comments not written "/" , "/". there problems @media declaration , height issues more 481 px.
hope helps.
Comments
Post a Comment