adding floating image

  • steveki
  • Topic Author
  • Visitor
  • 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
Attachments:

Please Log in to join the conversation.

More
13 years 6 months ago #9077 by ivan.milic
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;

Please Log in to join the conversation.

  • steveki
  • Topic Author
  • Visitor
  • 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

Please Log in to join the conversation.

  • steveki
  • Topic Author
  • Visitor
  • 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;
//}
Last edit: 13 years 6 months ago by steveki. Reason: more detail

Please Log in to join the conversation.

More
13 years 6 months ago #9104 by ivan.milic
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.
The following user(s) said Thank You: steveki

Please Log in to join the conversation.

  • steveki
  • Topic Author
  • Visitor
  • 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

Please Log in to join the conversation.

Time to create page: 0.144 seconds
Powered by Kunena Forum