Hi,
I have a problem with full page background. I know the problem was mentioned here https://siteorigin.com/thread/site-background/ but I started a new thread because of the premium code, so that I can have a quick response from the staff.
Greg said :
“Changing the background is only available when using the boxed layout. When you’re using the full width layout the actual page covers the main body background, so it wouldn’t make sense to change that.”
Now,
For me it would make sense because as you can see here (http://is.gd/5PiOn9 here is vantage theme, with boxed layout. ) 70 % of the page is covered with white and text. If I choose full width layout, is there any CSS custom code that I can introduce in order to override the settings and the white section to be transparent for example?
Hi
Greg is right, on the whole page backgrounds don’t look right when running the full width page layout. Please try the following under Appearance > Custom CSS, it should make your current background look a lot better:
/* Background Image */ body.custom-background { background-image: url('http://vandpastravsuceava.ro/wp-content/uploads/2014/05/waiting-for-a-breeze-cut1.png'); background-repeat: no-repeat; background-position: center center !important; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }For anyone else reading this thread my reference here for full page background images is from CSS Tricks: http://css-tricks.com/perfect-full-page-background-image/.
Sorry, the code doesn’t change anything, either in box or full width mode.
All I want is a transparent header/body/footer so that I would see only the background image and the text/logo.
Thank you for you patience ! Much appreciate it!
I don’t see the Custom CSS I sent in your source code. Have you removed it?
Here is how you could try set the opacity in the full width layout:
/* Vantage Full Width Set Page Opacity */ header#masthead { background: rgba(255, 255, 255, 0.5) !important; #main { background: rgba(255, 255, 255, 0.5) !important; } #colophon { background: rgba(255, 255, 255, 0.5) !important; }255, 255, 255 is RGB for white. If you don’t want white you’ll need to set that RGB value on your side. Photoshop, Color Schemer Studio and various other apps can help. 0.5 is the opacity, change that as required.
Yes I removed it and now I put the code back again and selected box layout.
That CSS does work. If you’re on a small display you might not be able to see. On my display before your background was fixed top left and repeating. It’s not centered and covering. See:
https://dl.dropboxusercontent.com/u/3072682/Screen%20Shot%202014-05-09%20at%203.55.18%20PM.png
You are right, it’s working. I also added the opacity code. It seems that its working only for the header. I now have a transparent header, and from the Custom home page builder I added a Circle icon widget. Is it possible to modify the widget’s opacity too ?
Thanks a bunch!
If you stay with the fixed width site then you should remove the opacity code I sent and just use:
/* Vantage Boxed Layout Set Page Opacity */ #main { background: rgba(255, 255, 255, 0.5); }These opacity settings only work for the overall page background. We can assist with CSS mods but only the short ones. Changing widget opacity would be more of a custom development task beyond our support scope unfortunately.
Thank you for support!
No problem, all the best for your project.