CODEWITHSUNDEEP
htmlcssimageposition
user984621
user984621

Reputation: 48453

Move body background image

I am using this CSS to put an image into the <body>:

body {
  background: url('picture.png') no-repeat; 
  background-size: contain;
}

The image is displayed at the top of the browser window, but I need to place this image a few pixels from the top.

I've tried using padding/margin-top: 20px;, but it didn't help me, the image is still at the top of the browser window.

How can I move this background image for the body tag a few pixels down from the top?

Note: I need to have the picture in the body tag.

Upvotes: 1

Views: 9245

Answers (2)

Sandeep Raju Prabhakar
Sandeep Raju Prabhakar

Reputation: 20112

You can use css background-position property,

example

body {
  background: url('picture.png') no-repeat; 
  background-position: 0px 50px; /* This makes the image appear 50px from top */
  background-size: contain;
}

Upvotes: 1

BoltClock
BoltClock

Reputation: 723668

You need to use background-position instead.

body {
  background: url('picture.png') no-repeat; 
  background-position: 0 20px;
  background-size: contain;
}

Upvotes: 5

Related Questions