Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Background position top right add a margin?

Tags:

css

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.

like image 498
StevieB Avatar asked Mar 29 '12 23:03

StevieB


People also ask

How do you add margins to the background of a picture?

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.

What does margin top do CSS?

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.

How do I make the background image fit my screen size?

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.

How do I center the background color in CSS?

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.


2 Answers

background: #7BC145 url(/images/ill_people_leadGen.png) no-repeat right 10px;

like image 80
Bryan Downing Avatar answered Nov 16 '22 01:11

Bryan Downing


Say you wanted 5 pixels of "margin":

/**                         replace 'top' with this vvv */
background: #7BC145 url("REDACTED") no-repeat right 5px;
like image 26
calebds Avatar answered Nov 16 '22 02:11

calebds