Hi there,
have this Site: http://badabaum.zweifrauwerk.de/
I would like some help with it, because I got the picture in the background to be fullscreen, but I won’t get the content to start on the next page/below the picture…
Also the Logo should be in the center in block in the middle of the picture.
And the last thing is, how do I get the Menu banner in the top to have some opacity, I would like to change it’s appearence a little bit…
I am very grateful for your help, since I am trying this the first time…oh and this is what I have in Custom CSS:
/* hier ist das fullscreen picture eingefügt
url(https://badabaum.zweifrauwerk.de/wp-content/uploads/2015/10/BadabaumLogo_horizontal_white.png)
*/
#pg-51-0.panel-grid:before {
content: url(https://badabaum.zweifrauwerk.de/wp-content/uploads/2015/10/BadabaumLogo_horizontal_white.png);
size: cover;
position: relative;
display: block;
margin: 0;
}
#masthead.site-header {
background-image: url(https://badabaum.zweifrauwerk.de/wp-content/uploads/2015/10/150908_bab_goersch207_srgb_02-1080×800.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: block;
}
#pg-51-0.panel-grid {
opacity: 0.8;
size: cover;
}
/* Vantage Hide the Site Title */
.site-navigation {
opacity: 1;
}
#menu-badabaum.menu {
opacity: 0.5;
}
.main-navigation ul li a {
padding: 20px 20px;
line-height: 2em;
}
Thanks!
Hi Zweifrauwerk
Thanks for reaching out.
We assist with very small CSS snippets here on the forum but unfortunately, don’t offer larger customisations. I can try take a quick look at this. Do you perhaps have a JPG mockup of how the end result must look? It might be easier for me to approach it that way.
Thanks for your answer so far. The Main Problem I have is about the Picture, that it is in the right position and responsive, alsways as big as the screen.
how can I send you a JPG here?
Maybe this way?
Thank you for your support!
An idea you can try for the first image is to use Meta Slider. It handles responsive behaviour really nicely. To do this you’d go to Appearance > Theme Settings > Home and de-activate the Full Width setting. Next, go to Meta Slider and add your background image as a slide, click Advanced on the right and opt for 100% width. In the slider settings don’t set a height. Finally, go to your Media Library, copy the URL of your overlay image and the go back to Meta Slider and add the URL in the Caption field. We cover the overlay method in more detail here:
https://siteorigin.com/vantage-documentation/getting-started/slider/
If you want to experiment with this approach you can create a test page, use the Prebuilt button in Page Builder to clone your home page and then play around. You can select a page Meta Slider from the right column drop down menu on any page.
Thank you! It did help so far ;)
Super :) Glad to hear you’re making progress.