CODEWITHSUNDEEP
css
Jonas
Jonas

Reputation: 7875

CSS: Background Image cover screen

I'm trying to have a background image to cover the whole screen. This is my css (sass):

.html {
    height: 100%;
}

.body {
    height: 100%;
    font-family: $font-sans-serif;
    background: $white;
    font-size: 16px;
    line-height: 1.6;
    color: darken(#ccc, 8%);
}

.masterhead {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 35rem;
    padding: 15rem 0;
    background: url(../images/bg_3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

But the background does not have to total screen size. When I set ´position´ to ´fixed` it works but then I cant scroll to see the elements below it anymore.

What am I doing wrong?

Upvotes: 0

Views: 162

Answers (2)

Lain
Lain

Reputation: 3726

You could just add it to the body. For me it looks like you misstyped body with .body and html with .html. . are definig styles for classes in css.

https://www.w3schools.com/cssref/sel_class.asp

html {
    height: 100%
}

body{
    height: 100%;
    font-family: $font-sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: darken(#ccc, 8%);
    
    width: 100%;
    height: 100%;
    min-height: 35rem;
    
    background-color: white;
    background-image: url('http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png');
    background-repeat: no-repeat;
    background-size: cover;
}

Upvotes: 2

Viira
Viira

Reputation: 3911

While styling you shouldn't use '.' for default html tags. Only classes should be having (a full stop) '.' before their names. you should probably use

body{height:100%;}

and not this unless you have a class name 'body'

.body{height:100%;}

Upvotes: 0

Related Questions