CODEWITHSUNDEEP
javascripthtmlcss
Filipino Trends 2017
Filipino Trends 2017

Reputation: 53

CSS Background Image not working on Local

Sorry for the basic question I have this problem when im trying to display my background image using background-image:url() on the css but unfortunately it doesnt work and when i use the content:url(); it works.

And also background-image also works with a url image location from the internet. I have tried everything and research a lot but still no luck. Sorry for the newbie question.

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: #e2dfe3;
    
}

.logo{
    height: 80px;
    width: 80px;
    display: inline-block;
    cursor: pointer;
    background-image: url('./images/Logo.png');
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">


 <header>
<div class="logo">
</div>
    <nav>
    <ul class="nav-ul">
        <li> <a href="#">Homes</li>
        <li> <a href="#">About</li>
        <li><a href="#">Shop</li>
    </ul>
    
    </nav>
    <a class="nav-button" href="#"></a><button>Login</button>
</header>

Upvotes: 0

Views: 736

Answers (3)

Abdur Rahman
Abdur Rahman

Reputation: 96

I just copy your code and place in a file structure like this And it works.

Absolute path like this also worked well:

background-image: url('C:/Users/User/Documents/test/images/logo.png');

Upvotes: 0

Filipino Trends 2017
Filipino Trends 2017

Reputation: 53

It works now. I added property background-size: contain;

.logo{
    height: 80px;
    width: 80px;
    display: inline-block;
    cursor: pointer;
    background-image: url('./images/Logo.png');
    background-size: contain;
}

Upvotes: 1

Anthony Cregan
Anthony Cregan

Reputation: 983

You were missing the <body> tag. (Its a good job you're not a mortician.)

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: #e2dfe3;
    
}

.logo{
    height: 80px;
    width: 80px;
    display: inline-block;
    cursor: pointer;
    background-image: url('https://dummyimage.com/80x80/000/fff');
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">

<body>
    <header>
        <div class="logo"></div>
        <nav>
            <ul class="nav-ul">
                <li> <a href="#">Homes</a></li>
                <li> <a href="#">About</a></li>
                <li><a href="#">Shop</a></li>
            </ul>
        </nav>
        <a class="nav-button" href="#"><button>Login</button></a>
    </header>
</body>
</html>

Upvotes: 0

Related Questions