Search Form and Social Buttons

HotThemes Logo and Top Menu

To request a forum account, please login here and open support ticket. Only customers with active order(s) can open forum account!

× Discussion about Sparky Framework and other free Joomla templates.

Topic-icon adding floating image

More
6 years 3 months ago #9045 by steveki
steveki created the topic: adding floating image
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
6 years 3 months ago #9077 by ivan.milic
ivan.milic replied the 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;

Please Log in to join the conversation.

More
6 years 3 months ago #9090 by steveki
steveki replied the 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.

More
6 years 3 months ago - 6 years 3 months ago #9091 by steveki
steveki replied the 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: 6 years 3 months ago by steveki. Reason: more detail

Please Log in to join the conversation.

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

Please Log in to join the conversation.

More
6 years 3 months ago #9158 by steveki
steveki replied the 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.157 seconds

Links, Partners and Social Media