Centering background

HTML-CSS
1

Hello,
I’ve been trying to center a background block.
It seems basic , but I can’t get an even amount of white background around the grey background.

#back {
	position: absolute;
	width: 100%;
	height:100%;
	background-color: #d8d8d8;
	background-position:50% 50%;
	top: 5%;
	left:5%;
	right: 5%;
	bottom: 5%;
}

.back is just a div . I can only get the space on either the top and left or bottom and right. I’m just missing something obvious I’m sure.

Thanks

1 Like
2

Try the next few lessons:
https://learn.freecodecamp.org/responsive-web-design/basic-css/adjust-the-margin-of-an-element
https://learn.freecodecamp.org/responsive-web-design/basic-css/adjust-the-padding-of-an-element
https://learn.freecodecamp.org/responsive-web-design/basic-css/add-borders-around-your-elements
https://learn.freecodecamp.org/responsive-web-design/basic-css/understand-absolute-versus-relative-units

they might be able to give u an understanding how it works. If that still doesn’t work for you try w3school/wikihow they have quite a good tutorial onto how to center an image.

also this one onto youtube: https://www.youtube.com/watch?time_continue=94&v=juAquKMGUU0

3

Yes , thanks. I already had tried that as well as margin-right , margin-left etc.
I tried this with my code and it only ever creates the white margin on two sides.
So I’m still wondering why I can’t do this. Thanks for your help though.

4

Did you also check if nothing else what interfering with your element?

5

Thanks for your reply. I have finally figured it out. I’m not sure why I didn’t get this earlier, rushing and stressing I guess.

6

Mind sharing the sollution with the rest of us so that others who might share the same issue as you in the future will also be helped :3

7

Try with margin: 0 auto;