- Posts: 14116
- Thank you received: 1639
adding floating image
-
steveki
- Topic Author
- Visitor
13 years 6 months ago #9045
by steveki
adding floating image was created by steveki
Just need some help with this please anyone.
I would like to add a transparent image (gif/png) to the top righthand corner of my template page (see attached). The image should float above the background but behind all the foreground elements such as text and menus.
See two files attached. Any help would be most appreciated. Thanks
I would like to add a transparent image (gif/png) to the top righthand corner of my template page (see attached). The image should float above the background but behind all the foreground elements such as text and menus.
See two files attached. Any help would be most appreciated. Thanks
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
13 years 6 months ago #9077
by ivan.milic
Replied by ivan.milic on topic Re: adding floating image
Open css/template_css.php (ote this is a .php file) and aftre this:
body {
color:<?php echo $bodyText; ?>;
<?php if($bgStyle) { ?>
background: url(<?php echo $template_path; ?>/images/bg<?php echo $bgStyle; ?>.jpg) <?php if($bgStyle>=5) { echo "top center no-"; } ?>repeat;
<?php }else{ ?>
background: <?php echo $solidBg; ?>
<?php } ?>
}
add override:
body {
background-color:#<coror of background as in your picture>;
background-image:url('<ulr of image with graphic with transparent background>');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
if graphic will move with content omit this line: background-attachment: fixed;
body {
color:<?php echo $bodyText; ?>;
<?php if($bgStyle) { ?>
background: url(<?php echo $template_path; ?>/images/bg<?php echo $bgStyle; ?>.jpg) <?php if($bgStyle>=5) { echo "top center no-"; } ?>repeat;
<?php }else{ ?>
background: <?php echo $solidBg; ?>
<?php } ?>
}
add override:
body {
background-color:#<coror of background as in your picture>;
background-image:url('<ulr of image with graphic with transparent background>');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
if graphic will move with content omit this line: background-attachment: fixed;
Please Log in to join the conversation.
-
steveki
- Topic Author
- Visitor
13 years 6 months ago #9090
by steveki
Replied by steveki on topic Re: adding floating image
This caused loss of all backgound and did not bring in the transparent image.
Can you help please?
Thanks
Can you help please?
Thanks
Please Log in to join the conversation.
-
steveki
- Topic Author
- Visitor
13 years 6 months ago - 13 years 6 months ago #9091
by steveki
Replied by steveki on topic Re: adding floating image
Correction:
Backgound colour (#151515) is okay but no image.
The body text colour changed to background colour #151515.
---OLD
body {
color:<?php echo $bodyText; ?>;
<?php if($bgStyle) { ?>
background: url(<?php echo $template_path; ?>/images/bg<?php echo $bgStyle; ?>.jpg) <?php if($bgStyle>=5) { echo "top center no-"; } ?>repeat;
<?php }else{ ?>
background: <?php echo $solidBg; ?>
<?php } ?>
}
---NEW
//body {
//background-color:#151515;
//background-image:url(../images/filigree-bg2.png);
//background-repeat: no-repeat;
//background-position: center top;
//background-attachment: fixed;
//}
Backgound colour (#151515) is okay but no image.
The body text colour changed to background colour #151515.
---OLD
body {
color:<?php echo $bodyText; ?>;
<?php if($bgStyle) { ?>
background: url(<?php echo $template_path; ?>/images/bg<?php echo $bgStyle; ?>.jpg) <?php if($bgStyle>=5) { echo "top center no-"; } ?>repeat;
<?php }else{ ?>
background: <?php echo $solidBg; ?>
<?php } ?>
}
---NEW
//body {
//background-color:#151515;
//background-image:url(../images/filigree-bg2.png);
//background-repeat: no-repeat;
//background-position: center top;
//background-attachment: fixed;
//}
Last edit: 13 years 6 months ago by steveki. Reason: more detail
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
13 years 6 months ago #9104
by ivan.milic
Replied by ivan.milic on topic Re: adding floating image
Probably image link in background-image:url(../images/filigree-bg2.png); is bad.
try:
/images/filigree-bg2.png
images/filigree-bg2.png
if you have sub folder for then you will maybe need to add sub folder name. Anyway if you put absolute path for image that will certainly work.
try:
/images/filigree-bg2.png
images/filigree-bg2.png
if you have sub folder for then you will maybe need to add sub folder name. Anyway if you put absolute path for image that will certainly work.
The following user(s) said Thank You: steveki
Please Log in to join the conversation.
-
steveki
- Topic Author
- Visitor
13 years 6 months ago #9158
by steveki
Replied by steveki on topic Re: adding floating image
Thanks that worked well. Can I have it move with the page content? And move it across more?
Thanks
Thanks
Please Log in to join the conversation.
Time to create page: 0.144 seconds