CODEWITHSUNDEEP
htmlcss
Bogdan Lazar
Bogdan Lazar

Reputation: 111

Image doesn't show when placing it in css

So I'm trying to minimize my html code and move everything to my css file. Problem is, I can't seem to get the image working when writing the code in css for it.

The HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<title>
Some title
</title>
</head>
<body>

<div id="pic1"></div>

<div id="pic2"></div>

<div id="top">

<h2 class="inner" id="banner">Some banner</h2>

    <ul>
        <li><a href="index.html" id="menu">Home</a></li>
        <li><a href="event.html" id="menu">Events</a></li>
        <li><a href="about.html" id="menu">Info</a></li>
        <li><a href="contact.html" id="menu">Contact</a></li><hr>
    </ul> 

</div>

The CSS: 

#pic1
{
    position: absolute;
    background: #ffffff;
    background-image: URL('../images/pic1.png');
}

#pic2
{
    position: absolute;
    right: 0px;
    background: #ffffff;
    background-image: URL('../images/pic2.png');
}

#top
{
    height:100px;
    width:100%;
    color: #0565a8;
    text-align:center;
/*  background: URL(../images/top.png);
    background-repeat: repeat-x; */
    background-color:#0565a8;
    box-shadow: 0px 1px 1px #000000;
}

Now my pic1.png and pic2.png images are located in: \Websites\thispage\images

And my css in: \Websites\thispage\images\css

So it makes no sense to me, why this might not work. I have also tried putting the image inside my css folder and changing my URL to ('austria.png'); but did nothing.

On a side note, using this worked like a charm: 

<div id="pic1">
<a href="index.html">
<img src="images/pic1.png">
</a>
</div>

But I want everything in css and not html.

Upvotes: 0

Views: 86

Answers (3)

AndrewL64
AndrewL64

Reputation: 16341

If by images/css you are referring to a folder name css inside your images folder, then the path should be:

URL('../pic1.png')

But if by images/css you are referring to the css file kept in the images folder along with the images, then the path should be:

URL('/pic2.png')

Also, as Guffa mentioned, you need to specify the size of background images which may be specific pixels, percentages or using background-size: cover, background-size: contain, etc

Upvotes: 0

Mistergreen
Mistergreen

Reputation: 1052

It should be background-image: URL('../pic2.png');

but it doesn't make sense to put your css folder in the images folder

do 

file.html
/images
/css

then you can use background-image: URL('../images/pic2.png');

Upvotes: 0

Guffa
Guffa

Reputation: 700910

There are two problems; the image URL is wrong, and you haven't specified any size for the elements, so the height will be zero.

As the css folder is in the image folder, you should only use ../ to get to it.

Example:

#pic1
{
    position: absolute;
    background: #ffffff;
    background-image: URL('../pic1.png');
    width: 200px;
    height: 100px;
}

Upvotes: 1

Related Questions