Menu
I want to add a margin to the background image so that I distance it from the middle of the screen, but adding it inside that class adds a margin to the whole body.
body.poppage {
background: url(/Imagenes/tip3.png) 50% 200px no-repeat #E2E4E9;
}
How could I do it? Thanks
679
Margin is the space between the border and the next element of your design. Think of the space outside the border and between it and the other elements. This is all the margin. Margin goes around all four sides of the content and you can target and change the margin for each side.
The most common & simple way to add background image is using the background image attribute inside the <body> tag. The background attribute which we specified in the <body> tag is not supported in HTML5.
Margin is providing space beyond the element's box and therefore won't be colored - it's simply space. Padding on the other hand provides space around the inside of the element's box and is colored and affected by other styles.
you can't color a margin, but the element exposed on either side is the body – you can set the background-color of that (it's in the style tags in the head of your html doc). The forum 'CSS' is closed to new topics and replies.
Use the containers padding to make a kind of margin for the background.
<div class="thebox">
<p>HEY!</p>
</div>
div.thebox
{
box-sizing: border-box;
width:400px;
height:400px;
border: 2px solid #000000;
padding: 10px;
background: url(http://studio-creator.com/blog/public/html5.jpg) center;
background-size: contain;
background-repeat: no-repeat;
background-origin: content-box;
}
https://jsfiddle.net/gann1pwm/
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
