Left and right css background in div change body content container width
I put this together to display the background on the left and right side of the website.
Now with this in place, the body container looks much wider than before. Why should it be?
Can anyone see what is not good 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 only screen and (min-width: 481px) {
//Happens when the screen size is >= 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 only screen and (max-width: 481px) {
//Happens when the screen size is <= 481px
div#multi-background {
background-image: none;
}
}
+3
source to share
1 answer
If I understood correctly, this will be the code you 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 and (min-device-width: 481px) {
/*Happens when the screen size is bigger than 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 and (max-device-width: 481px) {
/*Happens when the screen size is lower than 481px*/
#multi-background {
background-image: none;
}
}
<body><div id="multi-background"></div>
Comments were not written with "/" and "/". There were problems with @media declaration and problems with heights over 481 px.
Hope it helps.
0
source to share