CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
Cavs28
Cavs28

Reputation: 31

Add Margins to Background Image in CSS

I'm trying to add fixed margins to a background image and having trouble. I want the image to take up roughly 70% of the screen width, positioned to the right centre of the screen and then to have equal margins on the top, bottom and right sides.

This is the code I have currently for my background image:

html, body {

width: 100%;
height: 100%;
margin: 0 auto;
font-family: 'Roboto Condensed', sans-serif;
background: url(http://japesfawcett.com/img/bg.jpg) no-repeat right center fixed; 
background-size: 70% auto;

}

I've put my full current code in a Pen, here.

Here's an image that also helps to illustrate what I'm trying to achieve :

Image

Upvotes: 2

Views: 3766

Answers (1)

Temani Afif
Temani Afif

Reputation: 272965

You need to also consider adjusting background-position.

Here is an example with 30px on top/right/bottom sides and image take 70% of the width:

html {
  height: 100%;
  background: linear-gradient(to right,white 30%,red 0);
}

body {
  height: 100%;
  margin: 0 auto;
  background-image: url(https://i.picsum.photos/id/107/800/800.jpg);
  background-size: calc(70% - 30px) calc(100% - 60px);
  background-position: right 30px top 30px;
  background-repeat: no-repeat;
}

You can also consider background-clip width padding or border:

html {
  height: 100%;
  background: linear-gradient(to right,white 30%,red 0);
}

body {
  height: 100%;
  padding:30px 30px 30px 0;
  box-sizing:border-box;
  margin: 0 auto;
  background-image: url(https://i.picsum.photos/id/107/800/800.jpg);
  background-size: 70% 100%;
  background-position: right;
  background-clip:content-box;
  background-repeat: no-repeat;
}

Upvotes: 3

Related Questions