CODEWITHSUNDEEP
htmlcss
Ace
Ace

Reputation: 3

CSS background-image not showing on element

I am making a website for my friend but when using CSS the image doesn't show up.

<html>
    <head>
        <title>Bobby & Rose | Pillow Service</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

        <div class="wrapper">

        </div>

    </body>
</html>

CSS:

* {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Sans-Serif;
    font-size: 14px;
    background-color: grey;
}
.wrapper {
    margin: 30px;
    background-image: url(../img/warpper.png);
}

My image is the header menu background but when I try the website it doesn't show up.

Upvotes: 0

Views: 494

Answers (4)

Junaid S.
Junaid S.

Reputation: 2652

Here is mistake in your HTML

<title>Bobby & Rose | Pillow Service</title>

Solution - JSFIddle

HTML

<title>Bobby &amp; Rose | Pillow Service</title>

CSS

.wrapper {
    width: 100%;
    background-image: url(../img/warpper.png);
    min-width: 100px;
    min-height: 100px;
}

If still not working at your end then you should check the path of the image it is incorrect.

Upvotes: 1

Sara Mote
Sara Mote

Reputation: 236

Just noticed your image name is spelled 'warpper' while the div is 'wrapper'.

Perhaps two letters being switched?

On another note - depending on the size of your image, and how you'd want it to fill the div, you may need to add:

background-size: contain;

Upvotes: 0

Fabiano Dias
Fabiano Dias

Reputation: 1

Determine the size, I also use id instead of class

CSS 

#wrapper {
height:200px; <!--on me here -->
margin: 30px;
background-image:url('wrapper.png');
 }

HTML

<html>
<head>
<title>Bobby & Rose | Pillow Service</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div id="wrapper">

</div>

Upvotes: 0

j_s_stack
j_s_stack

Reputation: 665

The DIV has no Content therefore the size is 0x0px, means no place to show the image.

Add 

width:200px;
height:200px;

to your CSS. Instead of 200px youse what ever you want.

Upvotes: 0

Related Questions