Home/ Questions/Q 7428005
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T08:40:32+00:00

I’ve got some CSS and HTML that I’m working on, I wanted to sub

  • 0

I’ve got some CSS and HTML that I’m working on, I wanted to sub out the content that is a div block for an image and keep the border with rounded edges with it. But the image isn’t showing up when I preview the code. The CSS and HTML are linked correctly. Admittedly, this is just me tinkering to learn more about both CSS and HTML.

If you could look at this and give me some insight of how to get the image to show up in the rounded box, I would appreciate it.

EDIT: I’m afraid I wasn’t entirely clear enough on what the issue was. The image in the title tag and that is associated with the “a.title” css code isn’t the issue, that’s just a header image.

The issue is that I want an image to appear in the div class=”content” portion of the HTML with the image source coming from the CSS portion that is div.content.

I’m pretty bad at explaining my questions/problems, sorry. But thank you for all of your help thus far!

HTML: 

<html>
<head>
    <title>Some Title</title>
    <link href="/Volumes/lastname/sitename/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>

    <div id="container">        

        <p class="title"><img src="/Volumes/last/sitename/media/header3.png"></img></p>

        <div class="navbar">
            <a class="nav" href="http://www.facebook.com">Facebook</a>
            <a class="nav" href="http://www.twitter.com">Twitter</a>
        </div>

        <div class="content">
        </div>

    </div>

</body>

</html>

Here’s the CSS – I know its more of the code than you need to know but here any way:

body {
background: #ffffff 
width: 1000px;
height: 800px;
margin: 0 auto;
font-family: "Arial";
}

#container {
width: 900px;
height: 800px;
margin: 0 auto;
}

div.content {
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}

a.title {
margin-top:120px;
font-size: 36px;    
}

div.navbar {
margin-top: -62px;
float: right;
font-size: 18px;
}
a.nav {
text-decoration: none;
color: #717171;
padding-right: 20px;
}
a.nav:hover {
color: #1299d6;
}

div.text {
margin-top: 100px;
}


p.text1 {
display: block;
text-align: center;
}


p.text2 {
display: block;
text-align: center;
}


p.text3 {
display: block;
text-align: center;
}


p.text4 {
display: block;
text-align: center;
}

div.links {
margin-top: 50px;
text-align: center;
}

a.links {
text-decoration: none;
color: #ffffff;
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
border-radius: 10px;
opacity: 0.6;
}

a.twitter {
background: #42a300;
}

a.contact{
background: #1299d6;
}

a.subbutton{
background: #690260;
}

a.links:hover {
opacity: 1.0;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all your image tag is wrong. It must be 

    <img src="/Volumes/last/sitename/media/header3.png" />

    http://jsfiddle.net/vBRBM/

    Test the code.

    • 0