登录 | 注册 | FAQ
Anonymous

CSS background-image not working

+ 发表回复

8 篇帖子 分页: 1 / 1


CSS background-image not working

Gold2000 » 周四 1月 30, 2014 3:38 pm

I've began the CSS tutorial and have had trouble at the part of placung an image as the background. Everything else worked fine - changing the color (background, heading) - have copied everything - I've also copied the code example from the site (and I downloaded the butterfly image) - and it still didn't work.
Can anybody help?
头像

Gold2000

  • 帖子: 3
  • 注册: 周二 1月 28, 2014 1:57 pm

Re: CSS background-image not working

Gold2000 » 周四 1月 30, 2014 3:53 pm

Here's what I did (simple for the beginning):

HTML page

<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
</head>
<body>
<h1> My first stylesheet</h1>
</body>
</html>



CSS page

body {
background-color: #FFCC66;
background-image: url("firefox.jpg");
}

h1 {
color: #990000;
background-color: #FC9804;
}





* It worked fine for everything except the background picture.
头像

Gold2000

  • 帖子: 3
  • 注册: 周二 1月 28, 2014 1:57 pm

Re: CSS background-image not working

Equilibrium » 周四 1月 30, 2014 11:59 pm

Try only background:

body {
background: url("YOURURL");
头像

Equilibrium

  • 帖子: 1
  • 注册: 周四 1月 30, 2014 11:56 pm

Re: CSS background-image not working

Parker_09 » 周三 2月 05, 2014 5:25 am

Nice post!
头像

Parker_09

  • 帖子: 1
  • 注册: 周三 2月 05, 2014 5:20 am

Re: CSS background-image not working

Gold2000 » 周三 2月 05, 2014 7:05 pm

Thnx.
头像

Gold2000

  • 帖子: 3
  • 注册: 周二 1月 28, 2014 1:57 pm

Re: CSS background-image not working

sunilsreeram » 周三 2月 26, 2014 6:32 pm

I tried to insert the background image using the external method(3rd method as specified in this website), but it doesn't show any difference after inserting the url of an image in the css file.

css page
body
{ background-color: #75A319;
color: #ffffff
background-image: url("http://www.html.net/butterfly.gif");
}
h3
{ color: rgb(100,0,255);
}

And I also tried replacing background-image to background(as specified by a post in the same forum), but it didn't work.What is the problem ? Can anyone explain why the background image is not displaying?
头像

sunilsreeram

  • 帖子: 1
  • 注册: 周三 2月 26, 2014 6:18 pm

Re: CSS background-image not working

Zenam_9 » 周一 3月 10, 2014 9:27 am

Thanks for the post!
头像

Zenam_9

  • 帖子: 1
  • 注册: 周一 3月 10, 2014 9:21 am

Re: CSS background-image not working

CubeSquare » 周二 1月 20, 2015 11:14 pm

sunilsreeram,

Being able to read the source code is often an advantage. Knowing how they did that will often make the difference between understanding or not. To be able to read the source code you need Web Developer,
https://addons.mozilla.org/en-US/firefo ... developer/
It's under add ons and provides you with a tool bar that allows you to validate with the click of a button, read the source code, or pick apart programs down to Layout, Text, Ancestors and children. (Information/Display Element Infomation)
You get 12 buttons on the tool bar, wow! are they helpful!!

From being able to read the source code I was able to find out how they did that. The program used {background-image: url("http://html.net/tutorials/css/butterfly.gif");} You used {background-image: url("http://www.html.net/butterfly.gif");

The program tried to explain that you could download the graphic and use it on your own computer. In that case you could have Save Image As "butterfly.gif". It would be downloaded to your Documents folder. For people who haven't learned the project folder method for webSite design, the Documents folder is perfect, because HTML can call an image or a background-image from the Documents folder. so in that case it would have been {background-image: url("butterfly.gif");}

The introduction to images begins in Lesson 9 of the HTML Tutorial with the download of IrfanView, a free image editing program. Of course, if you could afford PhotoShop, you wouldn't need IrfanView. But if you were poor like me, you had a learning curve before you that would take some time. One of the items I got from IrfanView was to check everything. So when I see an image I want to copy, I right-click and choose everything, one at a time. OK, so it takes 5 minutes, but it pays!
头像

CubeSquare
Moderator

  • 帖子: 9
  • 注册: 周日 9月 26, 2010 6:04 pm


+ 发表回复

分页: 1 / 1