only part of background image shows

Dazzling
1

Hi,

I’ve uploaded a background image of 2560 x 1440 pixels, a size that will cover a big screen.
The problem is that it only shows part of the image and it is a bit pixelated.
When using dreamweaver in the past, I’ve used the css below to make the whole image cover the screen in every screen size. I’ve tried to use it with this theme and it showed up for about 2 seconds and then the background went white again… and I think the image was still cropped…
Is there a way to make my whole image show up and cover the background of every screen??
Thanks for your help,

Lisa

body.home.page.page-id-42.page-template.page-template-page-fullwidth-php.logged-in.admin-bar.custom-background.customize-support {
background-image:url("…/images/blue.jpg");
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}

2

@lisa

No custom modifications to CSS are required to use background image. Upload it via Appearance - Background and configure settings there. Below there are several options that will do exactly the same thing as you would do via CSS.

3

Hi Aigars,

I have uploaded my image through - Appearance -background, but it only shows about half of the image, it’s zoomed in and the rest is cropped off.
I really need the whole image to show, this is why I tried to add the extra css.
How can I get the whole image to show up?

Thanks,

Lisa

4

That’s expected behavior.

Of course you can add something like but this for background image but your will be even more disappointed when you will view it on mobile in landscape mode because this theme is responsive.

background-size: 100%;

5

Well I managed to fix it by adding:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Even works on the mobile landscape.

I have another question:
When I resize to tablet size the menu drops below the header, what css should I add to skip this menu and go straight to the little menu-toggle box (for phone-size)? Like this Colorlib page does. (no separate menu for tablet…)

Thanks

6

For that you will have to create new Bootstrap media queries breakpoints. You can do it via Bootstrap customizer. Afterwards you will have to replace newly created Bootstrap file with one that comes with theme. There is no clean way to get this done by overwriting existing media queries via Theme Options or Child Theme style.css