Zaloguj | Zarejestruj | FAQ
Anonymous

CSS background-image not working

+ Odpowiedz

Posty: 8 Strona 1 z 1


CSS background-image not working

przez Gold2000 » Cz sty 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?
Avatar użytkownika

Gold2000

  • Posty: 3
  • Dołączył(a): Wt sty 28, 2014 1:57 pm

Re: CSS background-image not working

przez Gold2000 » Cz sty 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.
Avatar użytkownika

Gold2000

  • Posty: 3
  • Dołączył(a): Wt sty 28, 2014 1:57 pm

Re: CSS background-image not working

przez Equilibrium » Cz sty 30, 2014 11:59 pm

Try only background:

body {
background: url("YOURURL");
Avatar użytkownika

Equilibrium

  • Posty: 1
  • Dołączył(a): Cz sty 30, 2014 11:56 pm

Re: CSS background-image not working

przez Parker_09 » Śr lut 05, 2014 5:25 am

Nice post!
Avatar użytkownika

Parker_09

  • Posty: 1
  • Dołączył(a): Śr lut 05, 2014 5:20 am

Re: CSS background-image not working

przez Gold2000 » Śr lut 05, 2014 7:05 pm

Thnx.
Avatar użytkownika

Gold2000

  • Posty: 3
  • Dołączył(a): Wt sty 28, 2014 1:57 pm

Re: CSS background-image not working

przez sunilsreeram » Śr lut 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?
Avatar użytkownika

sunilsreeram

  • Posty: 1
  • Dołączył(a): Śr lut 26, 2014 6:18 pm

Re: CSS background-image not working

przez Zenam_9 » Pn mar 10, 2014 9:27 am

Thanks for the post!
Avatar użytkownika

Zenam_9

  • Posty: 1
  • Dołączył(a): Pn mar 10, 2014 9:21 am

Re: CSS background-image not working

przez CubeSquare » Wt sty 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!
Avatar użytkownika

CubeSquare
Moderator

  • Posty: 9
  • Dołączył(a): N wrz 26, 2010 6:04 pm


+ Odpowiedz

Strona 1 z 1