CODEWITHSUNDEEP
htmlcss
Mandeep Debnath
Mandeep Debnath

Reputation: 3

How to position the background image for HTML/CSS?

I just designed my first prototype of a website. I designed it on Figma and chose the desktop layout. See The Final Prototype enter image description here

But as I put the background on the CSS code its gets stretched to the screen. See The Screenshot

enter image description here

So how do I adjust the size of the background image so that I get the exact background as seen on the final prototype to add logo and nav menu This is the Background

enter image description here

I'm a complete beginner to CSS.

Upvotes: 0

Views: 139

Answers (4)

falconimogollon
falconimogollon

Reputation: 111

body, html {
    background-image: url("https://i.sstatic.net/s7afd.png");
    /* Full height */
    height: 100%;
    width: 100%;    
    margin: 0;


    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
<!DOCTYPE html>
<html>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

there is your code

Upvotes: 0

Alex Ramirez
Alex Ramirez

Reputation: 127

It would help if you show the code that you are using, but I am guessing that you are looking for something like:

body {
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
}

Upvotes: 0

Shiv Kumar Baghel
Shiv Kumar Baghel

Reputation: 2480

use below code snippet

body, html {
    height: 100%;
    margin: 0;
}

.banner {
    height: 100%;
    background-image: url("https://i.sstatic.net/s7afd.png"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
<html>
<body>

<div class="banner"></div>


</body>
</html>

Upvotes: 1

Mahesh Garade
Mahesh Garade

Reputation: 11

Have you tried CSS background-size: cover;

Refer below link:

https://www.w3schools.com/cssref/pr_background-image.asp

Upvotes: 0

Related Questions