function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Test User 15Test User 15 

Fixed background image in visualforce Page

I think I tried every developer community post regarding my query still didn't find any solution, thats why posting new question. Hoping that I will get any solution.
So query is:
User-added image
What I want is to add background image inside that pageblocksection.
and here is the code:

VF Page:
<div class="main-right" style="width:98%;">
        <apex:pageBlock >
            <apex:pageBlockSection collapsible="false" columns="5" >
                 <div class="bg-image"></div>
            </apex:pageBlockSection>
        </apex:pageBlock>
</div>
Internal CSS:
 
.bg-image {
    margin : 0px;
    background-image: url(https://i.imgur.com/40jNzOy.png);
    background-position : center 0;
    background-size : auto auto;
    background-attachment : scroll;
    background-repeat : no-repeat;
    overflow :hidden; 
}
Thanks in advance.
Best Answer chosen by Test User 15
Ajay K DubediAjay K Dubedi
Hi Test,
Your code is correct but you have to add their height and width in your internal CSS.
I added height and width in your code and it is working properly.
VF Page:

<div class="main-right" style="width:98%;">
        <apex:pageBlock >
            <apex:pageBlockSection collapsible="false" columns="5" >
                 <div class="bg-image"></div>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </div>

Internal CSS:

.bg-image {
    margin : 0px;
    background-image: url(https://i.imgur.com/40jNzOy.png);
    background-position : center 0;
    width:1024px;
    height:875px;
    background-size : auto auto;
    background-attachment : scroll;
    background-repeat : no-repeat;
    overflow :hidden; 
}

Screenshot:
User-added image

I hope it will help you!
If this answers your query please mark this question as a solved so that it can be filtered out from unsolved questions.
Regards,
Ajay 

All Answers

Ajay K DubediAjay K Dubedi
Hi Test,
Your code is correct but you have to add their height and width in your internal CSS.
I added height and width in your code and it is working properly.
VF Page:

<div class="main-right" style="width:98%;">
        <apex:pageBlock >
            <apex:pageBlockSection collapsible="false" columns="5" >
                 <div class="bg-image"></div>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </div>

Internal CSS:

.bg-image {
    margin : 0px;
    background-image: url(https://i.imgur.com/40jNzOy.png);
    background-position : center 0;
    width:1024px;
    height:875px;
    background-size : auto auto;
    background-attachment : scroll;
    background-repeat : no-repeat;
    overflow :hidden; 
}

Screenshot:
User-added image

I hope it will help you!
If this answers your query please mark this question as a solved so that it can be filtered out from unsolved questions.
Regards,
Ajay 
This was selected as the best answer
Test User 15Test User 15
Thanks @Ajay. It's working fine now. Yes I forget to add height. :)