CODEWITHSUNDEEP
htmlcss
underrated
underrated

Reputation: 55

Image won't appear in div despite setting the height pixels

I just started out a day ago and i've been following this tutorial to make a login box. But I can't seem to make the background image appear inside the div even though i have set the height. The directory is 100% correct, I've checked it a thousand times.

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</link>
</head>
<body>
<div class="loginbox">
<div class="inner-loginbox">
    <div class="loginbox-front"></div>
    <div class="loginbox-back"></div>
</div>
</div>
<?PHP include('footer.php');?>
</body>
</html>

CSS

.loginbox {
width: 400px;
height: 450px;
background: rgba(255, 255, 255);
margin: 10px auto;
border-radius: 15px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
text-align: center;
}

.inner-loginbox {
position: relative;
width: 100%;
height: 100%;
}

.loginbox-front .loginbox-back {
position: absolute;
height: 100%;
background-position: center;
background-size: cover;
background-image: linear-gradient(rgba(0,0,100,0.8), rgba(0,0,100,0.8)),url(../images/loginbox.gif);
padding: 55px;
box-sizing: border-box;
}

Upvotes: 0

Views: 36

Answers (2)

underrated
underrated

Reputation: 55

Adding a comma in between .loginbox-front, .loginbox-back will do the trick because .loginbox-front and .loginbox-back is siblings.

Upvotes: 2

Marynathan Judson
Marynathan Judson

Reputation: 160

your image directory may be correct. Do you check is your php file including directory correct? Are you sure do you have your html file and your included php files in same folder.

Upvotes: 0

Related Questions