How to stretch background-image in html and css styling?

问题

I am new to html and css and is trying to create a personal website for learning purposes.

I am having difficulties with the background image not stretching to fit the screen. Providing the code in the following.

body{
    background-image: url(backgroundimage.jpg);
    /*background-color: #95afc0;*/
    background-size: cover;

}

The image works fine when the window is in full screen. I would like to see if there is any way for me to prevent it from duplicating the images to fit the screen and just crop or stretch to fit. As this would be an issue on mobile device. I've tried the other properties of background-size.

Thank you in advance!

回答1:

CSS The object-fit Property

Try the following and see what best suits your needs...

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

All Values of The CSS object-fit Property The object-fit property can have the following values:

fill - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit

contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box

cover - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit

none - The replaced content is not resized

scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)

H2 {
font-size:200%; color:#6a78c2; text-align:center; font-family: fantasy; 
}

.myimgs {
border:1px solid #333; background:#ff0653; padding:10px; margin-bottom:20px;
}

.myimg {
width:100%; background-position:center; background-repeat: no-repeat;
}

.fill {object-fit: fill;}
.cover {object-fit: cover;}
.contain {object-fit: contain;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

<H2>FILL</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg fill" width="1049px" height="693px">
</div>

<H2>COVER</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg cover" width="1049px" height="693px">
</div>

<H2>CONTAIN</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg contain" width="1049px" height="693px">
</div>

<H2>SCALE-DOWN</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg scale-down" width="1049px" height="693px">
</div>

<H2>NONE</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg none" width="1049px" height="693px">
</div>

回答2:

Try not to put the background on your <body>, but create a <div id="background"></div> with #background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;} (don't forget to apply a z-index > 1 on your first content layer to make your background a background).

回答3:

background-position: center;
background-size: contain;
background-repeat: no-repeat;

you need to add image background position to center and set repeat to no-repeat.

回答4:

You can try this code

body{
    background-image: url(backgroundimage.jpg);
    /*background-color: #95afc0;*/
    background-repeat:no-repeat;
    background-size: cover;
}

Cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

回答5:

To prevent duplication of background image, you need to add following css property and value:

background-repeat: no-repeat;

For more about background property follow this link: https://css-tricks.com/almanac/properties/b/background/

回答6:

You need to add background-position: center ( that refers to both axes X and Y ); background-repeat: no-repeat;

来源：https://stackoverflow.com/questions/52253060/how-to-stretch-background-image-in-html-and-css-styling

标签

html

css

web

background-image

background-size