Certain size background image in CSS.

[Guest]

Of course this is my body

body {
	background-color: white;
	background-image: url(Interior.jpg);
	background-repeat: no-repeat;
}

And this is how it looks 

Spoiler

Of course I sized it over, but it looked stretched. How do I fix that? I want it to be like a bar on the upper part of the page.

[vorticalbox]

You need an image the same size of the screen or an image that flawlessly repeats or stretch the wall paper.

[dlink377]

https://css-tricks.com/perfect-full-page-background-image/

[Guest]

2 hours ago, vorticalbox said:

You need an image the same size of the screen or an image that flawlessly repeats or stretch the wall paper.

Thank you. How would I go to make this fit flawlessly on other displays wider than mine?

[vorticalbox]

10 minutes ago, Factory OC said:

Thank you. How would I go to make this fit flawlessly on other displays wider than mine?

have multiple versions that load depending on screen size.

[Guest]

Just now, vorticalbox said:

have multiple versions that load depending on screen size.

What properties will I need to apply to load different versions?

[Mira Yurizaki]

7 minutes ago, Factory OC said:

What properties will I need to apply to load different versions?

You need to do a media-query: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

 

Looking up "responsive design" should also give you a plethora of material.

[vorticalbox]

2 minutes ago, M.Yurizaki said:

You need to do a media-query: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

 

Looking up "responsive design" should also give you a plethora of material.

Personally I hate "wallpaper" style background images.

[Guest]

13 minutes ago, vorticalbox said:

Personally I hate "wallpaper" style background images.

Yeah. I'm just training my HTML and CSS, so I'm trying to make a fake website for a fake indoor modeler for training.

[Guest]

19 minutes ago, M.Yurizaki said:

You need to do a media-query: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

 

Looking up "responsive design" should also give you a plethora of material.

Thank you so much. Can't wait to implement this.

[MoVo]

There are some other ways to get around this. If you have an image with a bigger resolution than your screen you can use 

background-size: cover;

This causes the image to be scaled so it fills the whole container. It will remain with the same aspect ratio, so there will be some overlapping. But you can fix this by setting the background-position to center or something. If you are using a full page sized background image you should think about adding 

background-attachment: fixed;

This causes your background image to stay in the same position while the content is scrolling over it. When you want to have a repeating background you should use seamlessly repeating graphics. These guys offer a big collection of simple repeatable background textures. The advantage of this, since it's only loading a small graphic, that it doesn't really affect your page load time.

 

[Guest]

3 minutes ago, MoVo said:

There are some other ways to get around this. If you have an image with a bigger resolution than your screen you can use 

background-size: cover;

This causes the image to be scaled so it fills the whole container. It will remain with the same aspect ratio, so there will be some overlapping. But you can fix this by setting the background-position to center or something. If you are using a full page sized background image you should think about adding 

background-attachment: fixed;

This causes your background image to stay in the same position while the content is scrolling over it. When you want to have a repeating background you should use seamlessly repeating graphics. These guys offer a big collection of simple repeatable background textures. The advantage of this, since it's only loading a small graphic, that it doesn't really affect your page load time.

 

Okay, thanks. I love some of the patterns I see.