Adding an Image Background
15 views
Skip to first unread message
jater
Sep 5, 2010, 2:14:48 AM9/5/10
to PHPSlideShow by zinkwazi.com
I would like to add an image background consistent with the slide show
images. If I add it to the template, the background color continues to
be displayed. If I delete the background color from the CSS, leaving
just the image definition, the slide show doesn't operate. Another
attempt was to add a CSS statement defining the background image then
create a div in a line immediately after <body> using that definition
to install the background. That made no difference.
Is there a way to modify the code to allow a background image as an
alternative to background color?
images. If I add it to the template, the background color continues to
be displayed. If I delete the background color from the CSS, leaving
just the image definition, the slide show doesn't operate. Another
attempt was to add a CSS statement defining the background image then
create a div in a line immediately after <body> using that definition
to install the background. That made no difference.
Is there a way to modify the code to allow a background image as an
alternative to background color?
BandonRandon
Sep 5, 2010, 2:21:06 AM9/5/10
to PHPSlideShow by zinkwazi.com
So what exsactly are you trying to do? Have the background change to
become the image the user is currently viewing? This would be a
dynamic background and change with the image. OR are you trying to
have one static background image for the whole show.
Without further investigation, if you are using an external stylesheet
and haven't removed the styles from the template.html file then the
styes in the external stylesheet are being overwritten by the ones in
the template.html. You only really want to use one or the other.
If you can provide a link or more infomation this should be an easy
fix. Possible provide the code you are trying to use to set your
background image.
become the image the user is currently viewing? This would be a
dynamic background and change with the image. OR are you trying to
have one static background image for the whole show.
Without further investigation, if you are using an external stylesheet
and haven't removed the styles from the template.html file then the
styes in the external stylesheet are being overwritten by the ones in
the template.html. You only really want to use one or the other.
If you can provide a link or more infomation this should be an easy
fix. Possible provide the code you are trying to use to set your
background image.
BandonRandon
Sep 5, 2010, 3:07:25 PM9/5/10
to PHPSlideShow by zinkwazi.com
Sent Via E-mail
I would like to have one static background.
My testing was done only with the CSS code in the template.html file.
This is the first one I tried:
<style type="text/css">
body {
background:#120a8f;
background-image: url(typhoon.jpg); position: fixed; width:
100%;
height:100%; top:0; left:0;
text-align:center;
font-size:15px;
font-family:Verdana, Helvetica, sans-serif;
color:#fff;
}
This is a variation I tried based on an idea I found for another
situation.
The image div would have the 'bg' identifier:
<style type="text/css">
#bg {position: fixed; width: 100%; height:100%; top:0; left:0;
body {
background:#120a8f;
text-align:center;
font-size:15px;
font-family:Verdana, Helvetica, sans-serif;
color:#fff;
}
To see where I'm using it, go to
http://www.rao-osan.com/osan-info/onbase/slide-shows/phpslideshow.php?direct
ory=typhoon/kompasu&menu1. Slide 48 has the typhoon image I'd like
to
have as background.
Jater
Jater,
You need to make sure you use the correct path to your background
image I had no problem using a background image with.
url("typhoon/kompasu/photos/47.jpg") repeat fixed 0 0 #120A8F
You need to make sure you use the standard background properties found
here: http://www.w3schools.com/css/pr_background.asp
In you code above width 100% is not valid for the background property.
If you would like to have your background be stretched to fill the
screen that's a little more tricky. See this article on the matter:
http://css-tricks.com/perfect-full-page-background-image/
Hope this helps to get you on the right track.
I would like to have one static background.
My testing was done only with the CSS code in the template.html file.
This is the first one I tried:
<style type="text/css">
body {
background:#120a8f;
background-image: url(typhoon.jpg); position: fixed; width:
100%;
height:100%; top:0; left:0;
text-align:center;
font-size:15px;
font-family:Verdana, Helvetica, sans-serif;
color:#fff;
}
This is a variation I tried based on an idea I found for another
situation.
The image div would have the 'bg' identifier:
<style type="text/css">
#bg {position: fixed; width: 100%; height:100%; top:0; left:0;
body {
background:#120a8f;
text-align:center;
font-size:15px;
font-family:Verdana, Helvetica, sans-serif;
color:#fff;
}
To see where I'm using it, go to
http://www.rao-osan.com/osan-info/onbase/slide-shows/phpslideshow.php?direct
ory=typhoon/kompasu&menu1. Slide 48 has the typhoon image I'd like
to
have as background.
Jater
Jater,
You need to make sure you use the correct path to your background
image I had no problem using a background image with.
url("typhoon/kompasu/photos/47.jpg") repeat fixed 0 0 #120A8F
You need to make sure you use the standard background properties found
here: http://www.w3schools.com/css/pr_background.asp
In you code above width 100% is not valid for the background property.
If you would like to have your background be stretched to fill the
screen that's a little more tricky. See this article on the matter:
http://css-tricks.com/perfect-full-page-background-image/
Hope this helps to get you on the right track.
Reply all
Reply to author
Forward
0 new messages