I'm on PrimeFaces 6.2 with JoinFaces on SpringBoot. I have a page with a single Accordion panel as the sole component. What I'm trying to achieve is not exactly a background image "for" the Accordion, but rather this:
I want to display a logo positioned at the bottom-center of the page
the logo always remains bottom-centered, no matter how the user maximizes/changes resolution of the browser.
when I expand the panels of the Accordion, it would overlap and conceal the logo in the background.
when I collapse the panels, the Accordion shrinks and the logo in the background becomes visible again.
Till now, I have neither been able to position an image at the bottom center of the screen...nor, how to do such an overlapping of the Accordion over the logo. Can somebody please advise how to achieve this?
Sorry, I badly misunderstood my problem. This has nothing to do with tweaking the Accordion. It's just about having a full page background image in HTML.
https://www.w3schools.com/howto/howto_css_full_page.asp
Related
I want the homepage of my webpage to have a fixed background image in between the navbar and footer with a smaller carousel box in front of the background image. I've looked around and haven't found anything that looks like this. I kind of don't know where to start. Is it possible?
The tag that contains your entire main content add a CSS background to it
Below navbar
Till footer
background:url(link);
Then use your slider as you would normally
I'm in need of a sliding gallery that spans the width of the page but darks out the other images but highlights the one in the middle on show. Hopefully I explained it enough. I can do a full width slider but I need a full width gallery slider. Thumbnails not so important.
No longer using this. using other methords that seem to work for now.
Thanks anyway
I have a navigation bar and an image slider under it. how can i stack them on top of each other? my goal is for the images in the slider to be the background-image of the navigation bar. Help me please. The navigation bar consists of a simple div, but the image slider (made in js) is a variable, and not a div. So basically i want to the div to be on top of the slider, i already set the div opacity to low so the images of the slider are visible. Thank you rich i will send the code now.
margin-top:0px;
put this in your css file for the nav-bar and the slider and it should move everything to the top.
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">
I have a problem with my website, i have created a css menu that is a dropdown menu on some elements. I use an image as a full cover. When i put my mouse over an element of the dropdown menu, the cover changes position. My test site is http://unibenefits.gr/test2/tripoli .
When you set a background-image to cover, it will fill the entirety of the element (usually HTML or Body) that you assign it to. This will change if the size of the element changes - e.g. if you resize your browser window, the background-image will resize to fit it.
Something in your dropdown menu is causing your site design to overflow horizontally (i.e. the design changes slightly on certain rollovers, so the design goes very slightly wider than the browser window). This, in turn, creates a horizontal scrollbar. The horizontal scrollbar takes up room in your browser window, effectivley resizing it. This is why your cover background-image is resizing - it's not actually changing position, though they look similar.
If you can identify what in your menu is causing the horizontal scrollbar to appear, you'll fix the problem.