Css3 background image fails

body {
background-image: url(“paper.gif”);
background-color: #cccccc;
}

Yes . . . this is out of CSS3 but I can’t get it to work.

My url is

body {
background-image: (“c:/mydesign/images/bluefadeleft.png”);
top left repeat-y:
}

this should hole for every page that references this css page - correct?

Hi there R_Schreiber,

assuming that this part of the code…

    mydesign/images/bluefadeleft.png

…is correct, then you should use this…

body  {
    background-image: url("file:///C:/mydesign/images/bluefadeleft.png");
    background-position: top left;
    background-repeat:  repeat-y;
 }

coothead

1 Like

This is for the external css page correct?
Thanks
Rick

It won’t work once you put it online. So I wouldn’t recommend going down this path (pun intended).

You really want to reference your images folder from the CSS file, as that will work locally and online. E.g.

/css/
    styles.css
/images/
    bluefadeleft.png

background-image: url(../images/bluefadeleft.png);
4 Likes

Thanks for your suggestion.

I did not make a difference However.
I entered it exactly as you suggested.

R_Schreiber.

We are missing something simple here so let’s start again.

Please describe your site and your wishes in diagramatic detail and preferably include a “working page” showing how your code is being implemented. FYI, a “working page” is an all-in-one page, starts with doctype and ends with close html and contains enough of the CSS and JS used to demonstrate the problem. (It is not a copy of your entire web site. :smile: )

If that is not possible, then perhaps provide a link to your test site.

Code can be included on a page by preceeding it with three backticks on a line by themselves and ending with three backticks on a line by themselves…

```
your block of code here
```

If you are developing this on a local PC and have no server, please show us the exact path from the hard drive to the images and from the hard drive to the HTML page and from the hard drive to the CSS file.

 

a typical path arrangement on a computer hard drive might be like this:

c:/mypath/mysite/index.html
c:/mypath/mysite/images/imgname.png (etc)
c:/mypath/mysite/css/mycss.css
c:/mypath/mysite/js/myjs.js

On an HTML server, you would think of it like this: (the left-most slash indicating the “root directory” of the site on the server (not the hard drive).

/index.html
/images/imgname.png (etc)
/css/mycss.css
/js/myjs.js

CSS: mycss.css

body {
    background:url("../images/imgname.png");
}

The above notation indicates a relative path from the CSS file to the images.
It will work on your PC as well as the server (assuming the file structure is the same).
If you prefer to use a path that is relative to the root directory of the HTML server, then omit the leading two dots. The path of an HTML file that begins with a right slash is based on the root directory of the HTML server, not the hard drive.

 
That image will be applied to the background of the body of every page that links to that CSS file in the head of the page.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/mycss.css">
    <title>myhtml page</title>
</head>

3 Likes

My old site is still on line (Propertieswithstyle.com)and I wish to do a major cleanup job with html5 and CSS3
Death shadow helped me with it before, however I’ve banged it up quite a bit.
Here is my tree . . .
C;/mydesign/css/images/

Hello everyone

Sorry to be so lame with this but I’ve forgotten what little I knew about html and css.

I tried creating my old site using wordpress but that was hysterical!

So here is what I have.

All of my site construction is on my computer.

Path= C:/mydesign/css/images/and a few others

Here is a top portion of my Index.html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="description" content="search south orange county real estate homes for sale, local real estate broker agent,local real estate office company, local real estate knowledge" />

<link
type="text/css"
rel="stylesheet" 
href="css/homepage.css"
media="screen,projection,tv" />

	<title>
		"Properties With Style, Inc. Residential Homes for Sale"
	</title>

	<script type="text/javascript"
        src="css/scripts/slideshow.js"
	></script>

	</head><body>

	<div id="<#pageWrapper">

		
			<link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Tangerine">
  
	<content>
	
	<div id="sideBar">

  	<ul id="mainMenu">

And here is a portion of my homepage.css

@charset "utf-8";
/* CSS Document */

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

hr {
	display:none;
}

body {
	font:normal 100%/150 verdana,geneva,helvetica,sans-serif;
	color:#4DF;
	background-image: c:/mydesign/css/images:("blueleftfade.png"); top left repeat-y;
    background-color: lightblue;
}
	
#pageWrapper {
	min-width:420em;
	max-width:100em;
}

#sideBar {
	float:left;
	width:180px;
	padding-top:1em;

Nothing I’ve tried has allowed me to get my background image to appear on any pages.

Please remember I’ve never fully understood the most basic css and html hieroglyphics of the whole thing but I started hearing about HTML 5 and CSS3 so I decided to try it again.

Oh, one more thing. I suppose I need to have a blog as Im in the residential real estate business.

I have no clue about that.

I really appreciate your help.

Rick

Hi there Rick. I’m afraid it’s nigh on impossible to read your code. You need to put 3 backticks on a line of their own both before and after each block of text.

. . .

Here is what W3c css Validation just found

…URI : homepage.css.css…
…25 body Value Error : background-image Parse Error c:(/mydesign/css/images:…(“blueleftfade.png”)…
…25 body Value Error : top Parse Error left repeat-y…
…90 Content Property zoom doesn’t exist : 1…

OK . . . I went back to the year 2012 and found an original css stylesheet.

Placed that inot the miz and my home pages is far better now.

for certain I’ll need help on sprucing it up.

I hope to incorporate html 5 and css3 into the site.

I have an old Java Script which works well on each page scrolling through real estate pictures.

It works on all of the pages but I’m wondering if I should try the new CSS slide show for safer operation.

Any ideas?

Thanks much . . . Rick

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.