- Thank you received: 0
 
adding floating image
- 
        steveki
 - 
            
				
                            Topic Author
                                 - New Member
 - 
            
         
        Less
        More
        
            
    
        
            
        
                14 years 4 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
        
            
    
        - Posts: 14116
 - Thank you received: 1639
 
            
        
                14 years 4 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
                                 - New Member
 - 
            
         
        Less
        More
        
            
    
        - Thank you received: 0
 
            
        
                14 years 4 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
                                 - New Member
 - 
            
         
        Less
        More
        
            
    
        - Thank you received: 0
 
            
        
                14 years 4 months ago         -  14 years 4 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: 14 years 4 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
 
            
        
                14 years 4 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
                                 - New Member
 - 
            
         
        Less
        More
        
            
    
        - Thank you received: 0
 
            
        
                14 years 4 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.179 seconds