So I have the following mark up :
background: #7BC145 url(/images/ill_people_leadGen.png) no-repeat right top;
And its nearly perfect but i just want to add a bit of margin on top of the image, just wondering how I could add that to above.
You can't really add margins to a background image, since it's not actually an element. A couple things you might try: If you've got a containing element just inside the body, you can apply the background image to this element and set margins on it.
The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
You can use a combination of position keywords: center , top , bottom , left and right . background-position: center center; The background image will be positioned in the center of the element.
background: #7BC145 url(/images/ill_people_leadGen.png) no-repeat right 10px;
Say you wanted 5 pixels of "margin":
/** replace 'top' with this vvv */
background: #7BC145 url("REDACTED") no-repeat right 5px;
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