CODEWITHSUNDEEP
htmlcssangular
ACristian24
ACristian24

Reputation: 385

CSS Full screen background

I need some help regarding CSS, I've been trying for hours to make a background be fullscreen.

This is my CSS:

.mainContainer{
    width: 70%;
    display: table;
    margin: 0 auto;
    padding-top: 100px;
}

html{
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    background-image: url(../assets/background.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

And this is my html:

<html>
<div class ="mainContainer">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</html>

This semi-works the problem is the background stops as soon as my content stops, it does not continue until the end of the browser window.

Example: enter image description here

I'm trying to make the background go way down there and dynamically resize with my browser.

Upvotes: 0

Views: 2636

Answers (4)

ACristian24
ACristian24

Reputation: 385

Thanks everyone for the help, the issue was from angular material style that was overriding my background-image tag and adding borders to it for some reason.

I fixed it by adding ::ng-deep in front of html css, like this:

::ng-deep html{
    background-image: url('../assets/background.jpg');
    background-position: center center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

Also the issue with the background not going full screen was because I was missing the body tag and body { min-height: 100%; }

Upvotes: 1

kawnah
kawnah

Reputation: 3414

A few things:

  1. Like another person said, use a <body> tag.

  2. Add a width of 100%

  3. in background-image rule, you should have single quotes around the URL, so it looks like: background-image: url('../assets/background.jpg');

Lastly, you should be using a DOCTYPE. https://en.wikipedia.org/wiki/Document_type_declaration

.mainContainer{
    width: 70%;
    display: table;
    margin: 0 auto;
    padding-top: 100px;
}

body{
    height: 100%;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    background-image: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
<!DOCTYPE html>
<html>
  <body>
    <div class ="mainContainer">
    </div>
  </body>
</html>

Also...in the Stack Overflow code embed, I don't think you can use custom elements.

Upvotes: 1

rydwolf
rydwolf

Reputation: 1528

In CSS, 100% is broken when it comes to vertical things. Try 100vh, which is the percentage of the viewing height. Also, 100vw is 100% of the viewing width. There are also vmin and vmax. Hope this helps!!!

Upvotes: 1

Johannes
Johannes

Reputation: 67758

Your HTML code is missing the body tag. Add that, and also add body { min-height: 100%; } to your CSS - this will also stretch the body height to at least the window's height.

Upvotes: 1

Related Questions