× Discussion about Sparky Framework and other free Joomla templates.

Topic-icon adding floating image

More
6 years 10 months ago #9045 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 or Create an account to join the conversation.

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

Please Log in or Create an account to join the conversation.

More
6 years 10 months ago #9090 by steveki
Replied by steveki on topic 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 or Create an account to join the conversation.

More
6 years 10 months ago - 6 years 10 months ago #9091 by steveki
Replied by steveki on topic 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: 6 years 10 months ago by steveki. Reason: more detail

Please Log in or Create an account to join the conversation.

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

Please Log in or Create an account to join the conversation.

More
6 years 10 months ago #9158 by steveki
Replied by steveki on topic 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 or Create an account to join the conversation.

Time to create page: 0.107 seconds