Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 297
  • Last Modified:

Change HTML code

Here is the current "template" code

.iosSlider .slider .item2 .inner { background-image: url(http://pimg.co/p/900x400/123321/fff/img.png); background-size: cover; }


I need to point this "url" line to root/images/index_page_mobile/Cover1.png

What should my code look like?

I changes it to /images/index_page_mobile/Cover1.png but it doe not load.
0
Nicholas_BlueStar
Asked:
Nicholas_BlueStar
  • 9
  • 7
  • 2
  • +1
1 Solution
 
GaryCommented:
Then the path must be wrong or the image doesn't exist.  What is the folder structure in relation to the root folder?
Is the images folder in the root of your website?
Note Linux OS is case sensitive
0
 
Rainer JeschorCommented:
Hi,
have you tried your full qualified url?
0
 
Nicholas_BlueStarAuthor Commented:
@Rainerj

meaning something like

www.domain.com/images/index_page_mobile/Cover1.png?

I am using a testing server right now (i.e. test.domain.com)

So if I use the full URL it will only work on the test site, right? Then when I put my site "live" I would have to go back in there and rewrite all those lines from test. to www. right?

I know that my case is correct.

I was thinking maybe I needed " " around it? Or something small like that?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Nicholas_BlueStarAuthor Commented:
folder structure

root (all my html pages)
images (folder)
index_page_mobile (folder)
Cover 1.png
0
 
GaryCommented:
"" is not needed unless there is a space in the url.
If you give the real url we could test it.

So does Cover 1.png have a space or is it Cover1.png - you pasted the name with a space.
0
 
Nicholas_BlueStarAuthor Commented:
sorry. It is cover1.png (no space)

current URL

test.bluestarbussales.com/index-2.html

It should be the first "slide" - it is currently just blank.

again here is the code that I have in the .js file

.iosSlider .slider .item1 .inner { background-image: images/index_mobile_page/Cover1.png; background-size: cover; }
0
 
GaryCommented:
You need the leading / to say the path is from the root

.iosSlider .slider .item1 .inner { background-image: /images/index_mobile_page/Cover1.png; background-size: cover; }
0
 
Nicholas_BlueStarAuthor Commented:
okay I added the initial / before images

still loading a blank image
0
 
GaryCommented:
Have you uploaded this to the server because I am not seeing the image name anywhere.
0
 
Nicholas_BlueStarAuthor Commented:
Yes

I am connected with an FTP program just to verify.

The images are located under /images/index_mobile_page/

I have Cover1.png through Cover10.png images inside that folder...My FTP program can see those files on the test server.
0
 
GaryCommented:
I have no problem accessing the images directly but they do not exist in your CSS
All you have is

.iosSlider .slider .item1 .inner {
    background-size: cover;
}


etc...
0
 
Nicholas_BlueStarAuthor Commented:
weird...

Is it something with Dreamweaver not uploading the .css file correctly?

Do you have a suggestion to "override" this?

I am looking at the css file in dreamweaver right now and it does have the location of those images in the code
0
 
Rainer JeschorCommented:
Hi,
just to add:
I get a 404 for the file "/css/lesssgrid.css"
0
 
Nicholas_BlueStarAuthor Commented:
so what does that mean?

Is dreamweaver known to have issues uploading all the files?

Im just curious what is making some of these files not to be put when I sync the local with the test server?
0
 
GaryCommented:
Just move it over manually - drag n drop into your ftp client in your css folder.

This is the file dc_ios.css
0
 
COBOLdinosaurCommented:
the leading slash refers to the current dirctory you nee to refer to the root with

../images/index_mobile_page/Cover1.png;

Cd&
0
 
Nicholas_BlueStarAuthor Commented:
manually updated the dc_ios.css file to the test server

still only seeing blank screens where the cover photos should be.
0
 
GaryCommented:
Found it, you have some typos - change these lines to this (Firefox was removing the css as it was invalid)
From line 15...
.iosSlider .slider .item1 .inner { background-image: url(/images/index_mobile_page/Cover1.png); background-size: cover; }
.iosSlider .slider .item2 .inner { background-image: url(/images/index_mobile_page/Cover2.png); background-size: cover; }
.iosSlider .slider .item3 .inner { background-image: url(/images/index_mobile_page/Cover3.png); background-size: cover; }
.iosSlider .slider .item4 .inner { background-image: url(/images/index_mobile_page/Cover4.png); background-size: cover; }
.iosSlider .slider .item5 .inner { background-image: url(/images/index_mobile_page/Cover5.png); background-size: cover; }

Open in new window

0
 
Nicholas_BlueStarAuthor Commented:
Gary - you rock! That solved the issue!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 9
  • 7
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now