How do i resize a background image of an element?

Question

div {
width: 100%;
height: 400px;
background-image: url(_theURL_);
}

th image is 1920×1080

Answer 1

The 'background-size' property can be set with two useful special values:

- 'cover': fit the size of the background image to cover the whole surface, not stretching ( keep aspect ratio ) but cropping if necessary.
- 'contain': fit the size of the background image to be contain entirely in the element, not stretching, leaving space not cover ( or covered with background image repetition if set ).

Answer 2

just tested

div{
width:100%;
height:40px;
background-image:url("https://images.template.net/wp-content/uploads/2014/12/Colorful-Aquarium-Background.jpg");
background-size:100% 40px;
}

this will strech the image so it fits the div (width/ height defined the same as in background-size)

another mystery solved Watson dear

Answer 3

try background-size perhaps (if you are trying to scale the image to fit the window size)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images

Answer 4

and please update if it works xD

Answer 5

In that case, you cannot put width:100% :) Put samo value in px, i don't know, what you width need, you will see :)

Answer 6

no problemo

Answer 7

ok :) try what @Burey says :)

Answer 8

@nikola but i want the image to cover the whole width of the page....?

Answer 9

@burey thanks a lot

Answer 10

@burey thanks again...it worked fine