+ Start a Discussion
sfdc18sfdc18 

background image in visualforce page

Hi,

 

How to add image in the background of the visualforce page?

 

Regards,

Mayur

Best Answer chosen by Admin (Salesforce Developers) 
MTBRiderMTBRider

1. Create a .css file.  

2. add a line like this in your css file: 

body {background-image: url(mybackground.gif);}

3. Add the .css and your image file to a zip file.  

4. Upload the zip file to your org as a static resource.

5. On your Visual force page, after the <Apex:page/> call the static resource like so:

<apex:stylesheet value="{!URLFOR($Resource.MyStaticResources, 'MyStyle.css')}"/>

 Hope that helps.

 

All Answers

MTBRiderMTBRider

1. Create a .css file.  

2. add a line like this in your css file: 

body {background-image: url(mybackground.gif);}

3. Add the .css and your image file to a zip file.  

4. Upload the zip file to your org as a static resource.

5. On your Visual force page, after the <Apex:page/> call the static resource like so:

<apex:stylesheet value="{!URLFOR($Resource.MyStaticResources, 'MyStyle.css')}"/>

 Hope that helps.

 

This was selected as the best answer
sfdc18sfdc18

 

Thanks MTBRider it worked.

 

I have one more query, how can i apply custom styles to my visualforce page?

I have uploaded the following css file to static resources along with the respective images.

 

html, body {
height: 100%;
}

body {
margin: 0px;
padding: 0px;
background: #080808 url(images/main-bg.png) repeat;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #2B2B2B;
}


h1, h2, h3 {
margin: 0;
padding: 0;
}

p, ol, ul {
margin-top: 0px;
}

p {
line-height: 180%;
}

strong {
}

a {
color: #0000FF;
}

a:hover {
text-decoration: none;
}

a img {
border: none;
}

img.border {
}

img.alignleft {
float: left;
}

img.alignright {
float: right;
}

img.aligncenter {
margin: 0px auto;
}

hr {
display: none;
}

/** WRAPPER */

#wrapper {
}

.container {
width: 1000px;
margin: 0px auto;
}

.clearfix {
clear: both;
}

/** HEADER */

#header {
overflow: hidden;
width: 900px;
height: 150px;
padding: 0px 50px;
background: url(images/gradient-bg.png) no-repeat center top;
}

/** LOGO */

#logo {
float: left;
width: 300px;
height: 150px;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
}

#logo h1 a {
display: block;
line-height: 150px;
text-transform: uppercase;
text-decoration: none;
font-family: 'Archivo Narrow', sans-serif;
font-size: 1.3em;
color: #FFFFFF;
}

/** MENU */

#menu {
float: right;
width: 600px;
height: 99px;
}

#menu ul {
float: right;
margin: 0px;
padding: 60px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin-left: 2em;
}

#menu a {
display: block;
padding: 10px 15px;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Archivo Narrow', sans-serif;
font-size: 1.10em;
font-weight: 600;
color: #B6B6B6;
}

#menu .active a
{
background: #0091E6;
border-radius: 5px;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: underline;
}

/** PAGE */

#page {
overflow: hidden;
width: 900px;
padding: 70px 50px 50px 50px;
background-color: #FFFFFF;
border-radius: 10px 10px 0px 0px;
}

#page h2
{
margin-bottom: 30px;
}

/** CONTENT */

#content {
float: right;
width: 580px;
}

#content #onecolumn
{
padding-bottom: 30px;
border-bottom: 1px solid #D4D4D4;
}

#content h2
{
letter-spacing: -1px;
font-size: 3em;
}

/** SIDEBAR */

#sidebar {
float: left;
width: 260px;
padding-top: 10px;
}

#sidebar #sbox1
{
margin-bottom: 40px;
}

#sidebar #sbox2
{
overflow: hidden;
margin-bottom: 50px;
}

#sidebar #sbox3
{
overflow: hidden;
}
/** BANNER */

#banner {
overflow: hidden;
padding: 50px 0px 0px 0px;
background: #A11C47 url(images/banner-bg.png) repeat;
border-radius: 10px 10px 0px 0px;
}

#banner:before
{
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
background: url('images/gradient-bg.png') no-repeat right top;
background-size: 100% 100%;
top: 0px;
right: 0px;
}


/* Footer */

#footer {
overflow: hidden;
width: 900px;
padding: 70px 50px 50px 50px;
background-color: #161616;
border-top: 6px solid #000000;
border-radius: 0px 0px 10px 10px;
}

#footer h2
{
padding: 0px 0px 50px 0px;
font-weight: 400;
color: #D3D3D3;
}

#footer p {
color: #4E4E4E;
}

#footer #fbox1 {
float: left;
width: 260px;
margin-right: 60px;
}

#footer #fbox2 {
float: left;
width: 260px;
}

#footer #fbox3 {
float: right;
width: 260px;
}

#copyright
{
overflow: hidden;
width: 900px;
padding: 50px;
}

#copyright p
{
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,1);
}

#copyright a
{
color: #4E4E4E;
}


ul.style1
{
margin: 0px;
padding: 0px;
list-style: none;
}

ul.style1 li
{
padding: 10px 0px 20px 0px;
border-top: 1px solid #242424;
}

ul.style1 a
{
color: #4E4E4E;
}

ul.style1 .first
{
padding-top: 0px;
border-top: none;
}

ul.style2
{
margin: 30px 0px 0px 0px;
padding: 0px;
list-style: none;
}

ul.style2 li
{
float: left;
margin-right: 10px;
}

ul.style3
{
margin: 0px;
padding: 0px;
list-style: none;
}

ul.style3 li
{
padding: 10px 0px 20px 0px;
border-top: 1px solid #E0E0E0;
}

ul.style3 a
{
color: #4E4E4E;
}

ul.style3 .first
{
padding-top: 0px;
border-top: none;
}
/** Slider */

#slider
{
overflow: hidden;
margin: 0 auto;
position: relative;
}

#slider .button
{
display: inline-block;
background: #0074C6;
color: #ffffff;
text-align: center;
line-height: 50px;
height: 50px;
text-decoration: none;
outline: 0;
border-radius: 8px;
font-size: 1.25em;
border-bottom: solid 2px #0054A6;
text-shadow: 0 1px 1px #003A6C;
}

#slider .button:hover
{
background: #2094E6;
}

#slider .viewer
{
width: 900px;
height: 400px;
margin: 0 auto 50px auto;
overflow: hidden;
}

#slider .viewer .reel
{
display: none;
}

#slider .viewer .reel .slide
{
position: relative;
width: 900px;
height: 500px;
}

#slider .viewer .reel h2
{
position: absolute;
top: 230px;
left: 0;
padding: 0px 30px;
line-height: 80px;
background: #111111;
text-align: center;
opacity: 0.75;
font-weight: normal;
font-family: 'Archivo Narrow', sans-serif;
color: #ffffff;
font-size: 4.50em;
}

#slider .viewer .reel p
{
position: absolute;
top: 310px;
left: 0;
display: block;
padding: 5px 35px;
background: #0074C6;
text-align: center;
opacity: 0.75;
font-family: 'Archivo Narrow', sans-serif;
font-weight: normal;
color: #ffffff;
font-size: 2.00em;
}

#slider .indicator
{
padding: 30px 0px;
background-color: #7A0C30;
margin: 0 auto 0 auto;
}

#slider .indicator ul
{
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}

#slider .indicator ul li
{
display: inline-block;
width: 12px;
height: 12px;
text-indent: -9999em;
background: #970D39;
margin: 0 2px 0 2px;
border-radius: 8px;
}

#slider .indicator ul li.active
{
background: #C4164E;
}

#two-column
{
padding-top: 50px;
}

.box-content
{
overflow: hidden;
margin-bottom: 4em;
}

.box-content p
{
padding-left: 60px;
}

.title
{
display: block;
padding-left: 60px;
padding-bottom: 1em;
font-size: 1.70em !important;
font-weight: 600;
color: #333333;
}

.title01
{
background: url(images/icon01.png) no-repeat left top;
}

.title02
{
background: url(images/icon02.png) no-repeat left top;
}

/* List Style 1 */

.list-style1 {
margin: 0px;
padding: 0px;
list-style: none;
}

.list-style1 li {
padding: 20px 0px 20px 0px;
border-top: 1px solid #D4D4D4;
}

.list-style1 .date {
font-weight: bold;
color: #212121;
}

.list-style1 img {
float: left;
margin-right: 25px;
}

.list-style1 .first {
padding-top: 0px;
border-top: none;
}

/* List Style 1 */

.link-style {
display: inline-block;
margin-top: 10px;
padding: 5px 15px;
background: #0091E6;
border-radius: 5px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}

 


.testimonial
{
font-style: italic;
color: #878787;
}

.author
{
padding-top: 20px;
font-style: italic;
}

.author .name
{
display: block;
padding: 5px 0px;
font-size: 1.2em;
font-weight: 700;
font-style: normal;
}

.author .position
{
display: block;
padding: 5px 0px;
}

.author img
{
float: left;
margin-right: 30px;
border-radius: 10px;
border: 5px solid rgba(0,0,0,.1);
}

 

 

 But it is not changing my styles as required.

I am using this code :  <apex:stylesheet value="{URLFOR($Resource.opentools.zip,'default.css')}"/> after <apex:page > tag

 

Kindly help.

 

MTBRiderMTBRider

Generally, you call your styles from the "style" attributes of the various visualforce components.  For instance, the <apex:pageBlockSectionItem> tag has style attributes: labelStyle, labelStyleClass, dataStyle, etc.  Other Visualforce components have similar style components.

 

Having said that, I have had varied success with changing the style of a page.   It works for some VF component's attributes, but seems to ignore others.  It may be just more of the "undocumented features" of Visualforce, or just me not being very good at Visualforce (I don't consider myself being very good at build pages and UIs).

 

In any event, play with it and see what you get.