...

View Full Version : Background image not working...



borosarchangel
05-11-2011, 05:47 PM
Here is the html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Title</title>
<link rel=stylesheet type="text/css" href="css\mainCss.css" media=screen>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>

<div id="page">
<div id="header">
<h5 id="pic">
</div>
</div>

</body>

</html>

And here is the CSS code:

body
{
background-color: white;
}

div#page
{
width: 900px;
margin-left: auto;
margin-right: auto;
letter-spacing: .1px;
}

div#header
{
width: 900px;
height: 145px;
border-color: #303030;
border-style: solid;
border-width: 1px;
font-size: 115%;
text-indent: 730px;
color: #ddddcc;
}

#pic
{
width: 100%;
background-image: url(..\hospital_logo.jpg);
margin: 0%;
}

I have the image hospital_logo.jpg saved in a folder up one level from where mainCss.css is saved (mainCss.css is saved in the folder css which is saved in a folder where Main_Page and the image is saved).

abduraooft
05-11-2011, 05:49 PM
<link rel=stylesheet type="text/css" href="css\mainCss.css" media=screen>


background-image: url(..\hospital_logo.jpg);

Change them to

<link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>

background-image: url(../hospital_logo.jpg);

iceregent
05-11-2011, 06:28 PM
Hey, I am having an issue with trying to put a background image into a div container. I have tried every way under the sun to get the thing to work. The container currently has a border in css sitting around it on the display, so that I can know where it is, but now, I want to put a background image into the container. Here is the current labeling:

<div id="display">

Here is the css in the css file:

#display { position : absolute ; top : 150px ; left: 175px; width : 600px ; height : 95% ;
text-align : center ; font-size : 14pt ; color : black ; border-style : solid ;
border-color : orange ; margin : 0px ; padding : 15px ; background-image: url("images/display_back.png");
background-repeat: repeat-x;}

I am not sure what I am doing wrong that the image does not display in the background.

Thanks;
Ice

AndrewGSW
05-11-2011, 07:00 PM
You should start a new post, don't just piggy-bag on someone else's.

Anyway, it works for me. Have you correctly closed your div tag? And is your path and image filename correct?

<div id="display"></div>

borosarchangel
05-11-2011, 07:16 PM
I am currently away from my workspace, but I feel retarded for putting a forward slash instead of a backslash. I will try that as soon as I get back.

Thanks for the reply!

iceregent
05-11-2011, 07:49 PM
You should start a new post, don't just piggy-bag on someone else's.

Anyway, it works for me. Have you correctly closed your div tag? And is your path and image filename correct?

<div id="display"></div>

Well. Considering that my post was about EXACTLY the same issue, it was a good place to start. Please tell me, are you the post police? Anyway, yes my div tag is closed correctly. And, how can you blanket state "it works for me" without even knowing the rest of the information? The path and filename are correct. And your response to my need for help is not a very friendly way to answer anyone in here. If you are going to respond like that, then please do not respond. I came here for help, and posted to a thread dealing with just exactly what I was asking about.

borosarchangel
05-11-2011, 08:22 PM
Okay, I am not sure what is wrong, but I am trying to get the picture inside the "header" portion. The picture flat out isn't showing up anywhere.

This is becoming very frustrating.

EDIT: I have tried multiple things, including moving the image into the css folder and making it background-image: url(hospital_logo.jpeg), doesn't work. I have tried using single quotes and double quotes. This is so bizarre.

EDIT EDIT: I have even tried using an actual url (http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png), and it doesn't work. It doesn't work on either firefox or chrome. wtf.

Here is the code again (slightly changed with the url):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Title</title>
<link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>

<div id="page">
<div id="header">
<h5 id="pic"></h5>
</div>
</div>

</body>

</html>



body
{
background-color: white;
}

div#page
{
width: 900px;
margin-left: auto;
margin-right: auto;
letter-spacing: .1px;
}

div#header
{
width: 900px;
height: 145px;
border-color: #303030;
border-style: solid;
border-width: 1px;
font-size: 115%;
text-indent: 730px;
color: #ddddcc;
}

#pic
{
width: 100%;
background-image: url("http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png");
background-repeat: no-repeat;
margin: 0%;
}

borosarchangel
05-11-2011, 08:44 PM
Here is a picture of what I am getting from my code, so you can compare:
http://i1098.photobucket.com/albums/g361/Forrest_Young/webpic-1.png

iceregent
05-11-2011, 08:51 PM
I put the picture in the actual code, rather than try to put it into the css..:



<div id="logo">
<img src="images/logo.png">
</div>


That does work. My issue is trying to make it the background of a div, rather than an image in the div...

borosarchangel
05-11-2011, 09:01 PM
I put the picture in the actual code, rather than try to put it into the css..:



<div id="logo">
<img src="images/logo.png">
</div>


That does work. My issue is trying to make it the background of a div, rather than an image in the div...

How do you format the picture within the html code? I have tried to use align, and it doesn't move.

AndrewGSW
05-11-2011, 09:07 PM
@borosarchangel

Your div has no height, as it has no content, so there is no background area to show. Set the height for #pic to the height of your image.

borosarchangel
05-11-2011, 09:20 PM
@borosarchangel

Your div has no height, as it has no content, so there is no background area to show. Set the height for #pic to the height of your image.


body
{
background-color: white;
}

div#page
{
width: 900px;
margin-left: auto;
margin-right: auto;
letter-spacing: .1px;
}

div#header
{
width: 900px;
height: 145px;
border-color: #303030;
border-style: solid;
border-width: 1px;
font-size: 115%;
text-indent: 730px;
color: #ddddcc;
}

#pic
{
width: 100%;
height: 100%;
background-image: url("http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png");
background-repeat: none;
margin: 0%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Title</title>
<link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>

<div id="page">
<div id="header">
<h5 id="pic"></h5>
</div>
</div>

</body>

</html>

I still don't have an image showing up in the header div. I am not wanting a separate div for the picture, I simply want a picture to be the background image within the div, stretched to fill up the whole space.

I am sorry for my inexperience, source code for a fix to this would be very much appreciated!

AndrewGSW
05-11-2011, 09:27 PM
Setting 'height: 100%;' won't work - give it a pixel height (the same height as your image).

iceregent
05-11-2011, 09:27 PM
Yes, this is my problem as well. I have set a background image for the body, and I have div's that I want to set backgrounds for, but i cannot seem to make them show up. I have tried in i.e as well as firefox..haven't looked in google chrome yet.. but pictures do show up as a picture, if you set them into the div locations like I showed you.

borosarchangel
05-11-2011, 09:31 PM
Setting 'height: 100%;' won't work - give it a pixel height (the same height as your image).

It isn't working. If you have code that works for this, I would prefer that.

AndrewGSW
05-11-2011, 09:42 PM
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body
{
background-color: white;
}

div#page
{
width: 900px;
margin-left: auto;
margin-right: auto;
letter-spacing: .1px;
}

div#header
{
width: 900px;
height: 145px;
border-color: #303030;
border-style: solid;
border-width: 1px;
font-size: 115%;
text-indent: 730px;
color: #ddddcc;
}

#pic
{
width: 100%; height: 100px;
background-image: url("images/homer1.jpg");
background-repeat: no-repeat; border: 1px solid blue;
margin: 0%;
}
</style>

</head>
<body>

<div id="page">
<div id="header">
<h5 id="pic"></h5>
</div>
</div>

</body>
</html>Height: 100% should also work (as you've given the header div a height). Perhaps try it with a locally stored image first.

iceregent
05-11-2011, 09:48 PM
ok, I just did it with an 'in-line' css statement, in the head section of the html document. It goes like this:


<style type="text/css">
div.display { background:url(images/display_back.png); repeat; border:2px solid black;}
</style>

Mind you, the options I put in are just for me to play with, such as the border etc...

AndrewGSW
05-11-2011, 09:56 PM
@borosarchangel

I've attached a screenshot which uses your image

#pic
{
width: 100%; height: 100px;
background-image: url("http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png");
background-repeat: no-repeat; border: 1px solid blue;
margin: 0%;
}

Dr3am3rz
05-12-2011, 10:35 AM
Hmm.. I'm not sure what's going but I've tried to edit your codes, even do what AndrewGSW said but still to no avail. Why not doing the other way?

<div style="background-image:url(hospital_logo.png); background-repeat:no-repeat; width:326px; height:81px"></div>

If it's still unable to solve the method that you use, you might use this to help you for the time being instead of wasting time frustrating about this and hold you up for continuing your work. =)


*Ooops!! Sorry, it's working on my side now. -.-"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum