+ Start a Discussion
HNT_NeoHNT_Neo 

Images syntax not working with static source within force.com site

Hey Everyone, 

I created a force.com site but can't get two images to render onto the page. I have static resources setup correctly as the reset of the CSS and js is showing up correctly on the page, except the logo and background image. 

This is my syntax used for the two images in question. 
<section class="mbr-section mbr-parallax-background" style="background-image: url(assets/images/3-wide-2000x913-68.jpg); padding-top: 80px; padding-bottom: 80px;">
<div class="mbr-figure"><img src="assets/images/starbucks-1400x1400-6.png"></img></div>

I've even added these apex stylesheet syntax's to my visualforce page, but I need to modify the CSS Syntax to point to apex syntax in the static source:  
 
<apex:stylesheet value="{!URLFOR($Resource.styles, 'assets/images/starbucks-1400x1400-6.png')}"/>
<apex:stylesheet value="{!URLFOR($Resource.styles, 'assets/images/3-wide-2000x913-68.jpg')}"/>
Can someone help me with the CSS Syntax to point to the static source? 

Thank you!





User-added image
Best Answer chosen by HNT_Neo
Edwin VijayEdwin Vijay
<section class="mbr-section mbr-parallax-background" <b>style="background-image: url({!URLFOR($Resource.styles, 'assets/images/3-wide-2000x913-68.jpg')}); </b>padding-top: 80px; padding-bottom: 80px;">
<div class="mbr-figure"><b><img src="{!URLFOR($Resource.styles, 'assets/images/starbucks-1400x1400-6.png')}"</b>></img></div>


 

All Answers

Edwin VijayEdwin Vijay
<section class="mbr-section mbr-parallax-background" <b>style="background-image: url({!URLFOR($Resource.styles, 'assets/images/3-wide-2000x913-68.jpg')}); </b>padding-top: 80px; padding-bottom: 80px;">
<div class="mbr-figure"><b><img src="{!URLFOR($Resource.styles, 'assets/images/starbucks-1400x1400-6.png')}"</b>></img></div>


 
This was selected as the best answer
HNT_NeoHNT_Neo
Thanks Edwin! 

I changed syntax just slightly for it to work, but thank you very much!!
 
<section class="mbr-section mbr-parallax-background" id="msg-box5-5" style="background-image: url({!URLFOR($Resource.styles, 'assets/images/3-wide-2000x913-68.jpg')}); padding-top: 80px; padding-bottom: 80px;">
 
<div class="mbr-figure"><img src="{!URLFOR($Resource.styles, 'assets/images/starbucks-1400x1400-6.png')}" ></img></div>