Background Position, Margin-Top

Background position, margin-top?

If you mean you want the background image itself to be offset by 50 pixels from the top, like a background margin, then just switch out the top for 50px and you're set.

#thedivstatus {
background-image: url("imagestatus.gif");
background-position: right 50px;
background-repeat: no-repeat;
}

Background Margin-top effect with CSS

background-position: center 50px;

you can change value as needed like 10px 100px

How do I add a top padding to a background image in css?

Padding will only be applied to the element to which you're adding the background, but not to the background image itself. It seems to be that what you want to play with is background-position.

You currently have background-position: center;

Try changing that to background-position: center 20px;

See: https://www.w3schools.com/CSSref/pr_background-position.asp for more examples

CSS Background Repeat Image Margin Top

As what Derek S said, try using pseudo elements: I created this simple demo that you can check out. It works on your code. So just change to what you need.

I would think this is what you are looking for.

By using:

.moiraitable:before {
content: "";
background-image: url("http://i.imgur.com/owEfTJa.png");
background-position: center top 100px;
background-repeat: repeat;
background-size: 100%;
position: absolute;
top: 100px;
width: 500px;
height: 100%;
z-index: -10;
}

Demo Fiddle

Offset a background image from the right using CSS

I found this CSS3 feature helpful:

/* to position the element 10px from the right */
background-position: right 10px top;

As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.

See Can I use for details on the supported browsers.

Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/

Update:

This feature is now supported in all major browsers, including mobile browsers.

Background picture has margin top,left,right how to remove it

This seems to be initial margin of HTML page. Remove it through CSS:

body{margin:0}

How do I add margin to just background image?

you can use the background-position property

CSS background position starting from given pixels on top?

Use a pseudo element and you can also simplify your pattern using one gradient:

#page {
height: 800px;
position: relative;
z-index: 0;
}

#page:before {
content: "";
position: absolute;
z-index: -1;
inset: 200px 0 0 0; /* the height of the header here */
background: conic-gradient(from 90deg at 1px 1px, #0000 90deg, rgba(74, 131, 167, .20) 0) 0 0/10px 10px;
}

#header {
background-color: #FFF;
height: 200px;
width: 50%;
margin: 0 auto;
}
<div id="page">
<div id="header">
<p>Start the blue patterned area under this header block</p>
</div>
</div>


Related Topics



Leave a reply



Submit