CODEWITHSUNDEEP
htmlcss
nbair
nbair

Reputation: 31

Resizing a background image in HTML

I'm new to HTML and I currently have the following code stored in a .css file. What is the best way to allow for auto resize if the user changes the window size? I tried to use the following code to allow for this but I was not able to get the intended result. 

body {
    background-image: url('Images/Space.jpg');
    text-align: center;
}

text {
    color:white;    
}

img {
    width: 100%;
    height: auto;
}

Upvotes: 0

Views: 54

Answers (2)

user1805543
user1805543

Reputation:

width 100% makes responsive, image cover does the same, but more usefull no need to set width or height

* { margin: 0; padding: 0; }
		
body { 
	background: url(https://www.w3schools.com/css/img_flowers.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

Upvotes: 1

Kundan
Kundan

Reputation: 1962

Try using CSS background-size Property.

body {
    background-image: url('Images/Space.jpg');
    background-size: 100%;
    text-align: center;
}

Upvotes: 0

Related Questions