Home Page Background Image

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

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

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.

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

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…

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

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.

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

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.

Hello,

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

Best Regards

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.

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