Textpattern CMS

#1 2012-07-15 20:32:57

adanielsons

New Member

Registered: 2012-07-15

Posts: 1

editing url ( ) in css does not change image

I am relatively new to code and am using dreamweaver to build a personal website. I have downloaded a demo of a vertical sliding accordion using jQuery from “Codrops”. All is going well, however I cannot get my images to show up when I try and edit the url ( ) on the style.css page. My images are saved in a folder title “images” and this folder is located within the main folder which has all the files for my website. Below this post is how it appears in dreamweaver. I can’t post images yet, but I’ve tried to show the code instead.

The image is should appear within the black box. Each image is controlled by an overall div class titled .va-slice and then individual images are controlled by an individual div class such as .va-slice-1 (-2, -3, etc.) Whenever I try and edit the url within the .va-slice-1, no image shows up or the text becomes green instead of blue, which I believe means it is incorrect.

I have tried changing the file path name several times since I thought I could simply be typing it in wrong or need to include more information as to the image location? Not sure and no one else seems to have posted this seemingly simple problem. Any advice would be appreciated, thanks!

Here is Codrops source code:

<div id="va-accordion" class="va-container">
<div class="va-nav">
<span class="va-nav-prev">Previous</span>
<span class="va-nav-next">Next</span>
</div>
<div class="va-wrapper">
<div class="va-slice va-slice-1">
<h3 class="va-title">Marketing</h3>
<div class="va-content">
<p>Henry Watson</p>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

Here is Codrop’s css:

.va-slice{
cursor:pointer;
position:absolute;
width:100%;
left:0px;
overflow:hidden;
}
.va-slice-1{
background:#000 url(../images/1.jpg) no-repeat center center;
}

Here is my source code:

<div class="va-wrapper">
<div class="va-slice va-slice-1">
<h3 class="va-title">Japan</h3>
<div class="va-content">
<ul>
<li><a href="#">About</a></li>
</ul>
</div>
</div>

Here is my css:

.va-slice{
cursor:pointer;
position:absolute;
width:100%;
left:0px;
overflow:hidden;
}
.va-slice-1{
background:#000 url(/images/test.png) no-repeat center center;
}

[added a couple of bc.’s for better code display (How do I post tags and code on the forum?). -Els]

Last edited by els (2012-07-15 21:47:22)

#2 2012-07-15 22:24:39

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: editing url ( ) in css does not change image

Have you tried url(../images/test.png)? If you go to yoursite.com/images/test.png do you get to see the image? Does the rest of your css work, e.g. if you change the background colour from black to something else does it show?
It would be helpful if you could provide a link to the site, but I assume you are developing it locally?