Fullscreen HomePage

[Stephane]

Tom,

I don’t know who have to do this but when you resize the window (or on mobile view), the background is not centered/resized. Is it normal?

Have you an idea to put the navigation background transparent?

Thanks,
Stephane.

[Tom]

Hi Stephane,

I agree that an option to set the header/navigation to transparent in the page header options would be a good addition – I’ll look into that.

The background image image should resize according to the size of the browser – can you link me to the page?

To set the navigation to transparent, you’ll have to target that specific page with its unique body class.

For example, if the ID of the page is 20, your CSS would be:

.page-id-20 .main-navigation, 
.page-id-20 .main-navigation ul ul {
    background-color: transparent;
}

[Stephane]

Ok. Thank you Tom.

For the background image size, you can have a look at http://dev.proteo-interactive.com/. I notice it is only for the video background. Others work well.

I try also the transparent background with the custom css of jetpack plugin. Not seems to work!

[Tom]

Hmm – maybe videos/gifs don’t resize like other images, interesting..

As for the background, as your nav is inside the header you’ll need to use this code:

.page-id-20 .main-navigation, 
.page-id-20 .main-navigation ul ul,
.page-id-20 .site-header {
    background-color: transparent;
}

[Stephane]

I’m very confused but it seems not working.

[Rachel]

Hello there!

I just came across this forum post and I’m hoping someone will see this…
I’ve had this problem CONSTANTLY since trying to make my website, but I’m so frustrated- only now am I speaking up. I just can’t get my background pictures to center fully. They are always zoomed in/ cropped and I can’t see the rest of the picture. It is located in the ‘Page Header’ section (background image).

I’ve tried what I think is every possible option, but I’m no pro. Far from it. I would love it if someone could tell me what I’m doing wrong.
-Also, does anyone know how I can center (or push right) my opt-in form? I’m missing something.

Pic of webpage:
https://picasaweb.google.com/lh/photo/z9EaNTNTSQEoldQAycY4CtasDPyScxwZxDt0l1MaJvY?feat=directlink

Pic of actual image, obviously more to see than what is shown on the webpage:
https://picasaweb.google.com/lh/photo/YgJUezTU06MPwJZHMFBNZdasDPyScxwZxDt0l1MaJvY?feat=directlink

I’m pulling out my hair, please help before I go bald 🙂 Thank you!!

[Tom]

Hi Rachel,

Backgrounds images in Page Header are set to take up the entire area that they’re set to, meaning if the aspect ratio of the image isn’t the exact same as the aspect ratio of the element it’s set to fill, certain parts of the image can be cut off.

The amount of image showing/not showing will vary depending on screen size (both height and width).

Unfortunately there’s no real way around this, but you can change the background position to left, right etc..

Let me know if you need more info 🙂

[Rachel]

Thanks so much for getting back to me, Tom! What a relief.

I tried to change the picture to the width of the website layout size and it did nothing. I’m now having to do what I’ve been doing, which is just taking a set canvas size and placing the picture on it, scaling the picture until it fits where I want it to on the website space.

I’m afraid that all this editing will be for nothing though when I go to view my website on my phone. Guess I’ll deal with that when I get there.

[Tom]

It will definitely look different on your phone because of the aspect ratio.

I’m contemplating an option to upload a mobile background image in Page Header/Sections so a separate image can be uploaded just for mobile with a different aspect ratio.

Going to try and work it into the rebuild 🙂

[Rachel]

Wow, yes, that would please a lot of people! Very handy indeed.

Thanks for helping us all out. Will definitely be buying you a coffee for the assistance 🙂

[Tom]

Thank you! 🙂

[Author]

Posts