Home Page Background Image

This topic has 11 replies, 2 voices, and was last updated 6 years, 7 months ago by Elise Noromit.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
April 8, 2018 at 6:22 pm #51574

ExonGames
Participant

Hi,
Does it possible to change the background of the home screen page to an image instead of the white background?

April 9, 2018 at 8:46 am #51617
Elise Noromit
Member
Hello,

You will need to use this custom CSS:
```
.website-wrapper{
    background-image: url(PUT HERE URL OF THE IMAGE) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.main-page-wrapper{
    background:transparent;
}
```
Enter the homepage editing mode and insert this code into page settings section http://prntscr.com/j2sb1m

Best Regards
April 22, 2018 at 3:42 pm #53842

ExonGames
Participant

Hi,
Thanks it’s working! But I wanted to know if it’s possible to make the background rescale it self depends of the screen resolution and whether it’s a phone and all of this?
If not, is it possible to just make the background not show up at all in the mobile version?

Hope to hear from you soon,
Best regards.

April 22, 2018 at 5:40 pm #53862
Elise Noromit
Member
Hello,

The background image is poorly rescaled. If you expect that it would be almost the same as on device, you are mistaken. It will be blurred or cut. If you want this code to work on device only, put this code:
```
@media screen and (max-width:768px){
.website-wrapper{
    background-image: url(PUT HERE URL OF THE IMAGE) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.main-page-wrapper{
    background:transparent;
}
}
```
Put this code into Page settings.

Best regards
April 23, 2018 at 7:03 pm #54158

ExonGames
Participant

I want it to work just on the PC…
This is what you meant by this code working just on device?
Because I prefer this wallpaper to work just on the desktop version… And I know it will be cut but still to have the option…

April 23, 2018 at 7:14 pm #54160
Elise Noromit
Member
Hello,

Put this code in Theme Settings > Custom CSS > Desktop it will work on desktop only
```
.website-wrapper{
    background-image: url(PUT HERE URL OF THE IMAGE) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.main-page-wrapper{
    background:transparent;
}
```
Best Regards
April 23, 2018 at 7:53 pm #54166

ExonGames
Participant

Can you tell me what I need to add to show this wallpaper just on a specific page? (My home screen)

Hope to hear from you soon with a response,
Best regards.

April 23, 2018 at 8:09 pm #54169
Elise Noromit
Member
Hello,

Please provide me the link to the page, link to the wallpaper and device width.

Or you can add this code to Page Setting
```
@media screen and (min-width:768px){
.website-wrapper{
    background-image: url(PUT HERE URL OF THE IMAGE) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.main-page-wrapper{
    background:transparent;
}
}
```
Best Regards
April 23, 2018 at 8:14 pm #54171

ExonGames
Participant

No… The first code worked perfectly… This:

.website-wrapper{
background-image: url(PUT HERE URL OF THE IMAGE) !important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.main-page-wrapper{
background:transparent;
}

I just want you to add to it the code that will make this show the wallpaper I chose just in the home screen…

Hope to hear from you soon with a response,
Best regards.

April 24, 2018 at 6:08 am #54208

Elise Noromit
Member

Hello,

Please provide the link page, the link to wallpaper and your site admin access.

Best Regards

April 24, 2018 at 7:12 am #54249

ExonGames
Participant

You are not listening to me…
I don’t need you to do this for me… Just edit the original code you wrote me to apply the wallpaperin the first place with the addition of it just applying on a specific page…
I will do the rest…

Hope to hear from you soon with the edited code,
Best regards.

April 24, 2018 at 7:40 am #54252
Elise Noromit
Member
Hello,

As I understood, you want wallpaper on home page only.

In order to have wallpaper only for the home page, you need enter the editing mode of the home page and open Page setting tab http://prntscr.com/j9c36c and http://prntscr.com/j9c3df

Inder there the code:
```
@media screen and (min-width:768px){
.website-wrapper{
    background-image: url(PUT HERE URL OF THE IMAGE) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.main-page-wrapper{
    background:transparent;
}
}
```
Pay attention to this line: background-image: url(PUT HERE URL OF THE IMAGE) !important; you need to insert image url used as a wallpaper.

In this case, the code will be effective only on the page where it is inserted.

Sorry, if it is not what you want to clarify once more.

Best Regards
Author

Posts