I have a tricky CSS situation which I can't seem to solve.
I'd like the top portion of the body background to be one color (white), and then fill with another color (blue) from a certain position downward (below a footer in my case), and ensure that this color always fills (bleeds) to the bottom edge of of the browser window, regardless of window size.
I tried using a small blue bitmap, specifying the starting position via background-position, then applying background-repeat: repeat-y, but it fills in both directions.
I also thought of creating a long div but this affects the canvas size -- browser adds scroll bars, mobile will render the entire size -- no good.
Any ideas? (I'm not looking for a sticky footer) Thanks!
You should just add the background property in your footer instead.
Then you add some huge padding-bottom and add a negative margin-bottom of the same amount.
Just make sure you have an outter div with overflow: hidden;
FIDDLE
Related
I want the red box to cover the black box at all times, even when window is resized. The size of the box is 40px*40px and does not change in size when the window is resized. All the content changes in size except the black box. Also the distance from the top stays the same. How can I achive this so that the red box is always on top.
just create a div element which includes both
I will suggest using the same properties for the black and red(so that if you resize, they fall at the same place) and use the z-index to make sure that the red is on top.
I am trying to implement a sidemenu with a background image but I don't understand how to make it responsive also vertically...
I have this image https://ibb.co/Pzyyyh2 whose size is 320x1000px. It's a very tall white image that a certain point becomes black.
I'd like to have this black detail to stay always at a certain point of my sidemenu (the transition from white to black should start before the social link part).
As you can see here, on iPhone X emulator, it works as expected: https://ibb.co/C7Nm6b7.
While on another device such as Moto G4 this happens: https://ibb.co/S7tQwJV
You don't need the white part of the image, if what you're trying to show is the black, then just use the black. If your image is an svg, it will always expand/contract properly, without visible pixelation. The rest of the footer should have a background-color equal to that of your img.
If you want to use skew, then make a first div (the parent/wrapper), then place it right before your footer area. Then inside the wrapper, add the skew-div. Make the parent have overflow:hidden so the excess of the skew-siv doesn't become visible past the borders of the parent.
Like this:
Then, inside your 'magic-div', you'd have the following:
The parent gets width: 100%; and overflow:hidden;. The child skew div inside gets width:100%; too. If you're using background with an svg as suggested earlier, the background-size rule should be 100% auto or cover, depending on the scenario (the widths you're covering + the angle of your skew). Give it a try and let us know how it went.
I'm making a webpage where I have a div ("container") that is a parent to the div "rounded". For some odd reason, the webpage doesn't let me scroll down even though both of the divs' height are larger than the screen.
Here's a jFiddle with the components that aren't working out: http://jsfiddle.net/pmg92/19/
Any ideas as to why this isn't working?
You need to take the position:fixed off the .container so that it allows the page to be scrollable
EDIT
Check this out here http://jsfiddle.net/pmg92/23/ I think this is what you are looking for. I took out the non relevant css so don't just copy and paste to yours. I eliminated your background rounded image in place of using border-radius because by using a background image you can't really shrink or expand depending on content. This won't work on older browsers unless you use webkits and so on.
If you want to use an image I would suggest slicing the image between a top, bottom, and middle. The top would contain the top section with the radii. The middle would be 1px tall that repeats vertical as needed. The bottom would contain the bottom section with the radii.
The problem is that you have the position of the container fixed.
Thanks for your help in advance.
Here is PNG of the layout: Website Layout
The Second Section (with the dark grey background) is giving me problems. Below is the CSS I am using for the background.
#mainbg {
width:100%;
height:450px;
padding-top:25px;
background-image:url(../images/mainbg.png);
background-color:#303030;
background-position:top;
background-repeat:repeat-x;
}
The background displays, (although it won't display unless I set a min-height, which doesn't work for IE6 anyway), and everything works, until I get content that stretches beyond say 450px.
After that, the content just spills over into the footer, and the background doesn't stretch. I don't want the IMAGE to stretch, just for the image to end and the background colour to continue on as a plain background fitting to the content.
How do I set the background height for this div so that it stretches to accommodate the content, whilst only displaying the background image once on the y axis (while still repeating on the x axis).
I play around with other height and inherits and autos, but setting any of those just means the image does not display.
Help, this is driving me insane!
You have two problems:
It is forcing you to set a minimum height because you don't have content in it yet. Imagine an empty div. It will be as wide as the screen, since it's block level, but as tall as the text, which is nothing. So you don't need a minimum height, you just need a height or some actual content.
The background will only take up the space that the div is taking up. If the color and the image stop, that means the div has stopped. Try setting "overflow: scroll" just to see where the cutoff really is..
One thing that will make your life a lot easier with CSS is to not try to set everything all at once and make sure layout is good, then worry about cosmetics like background images and colors. Try give the troublesome div a background color of orange and a blue border. This will give you perfect idea of when things start and stop. Once you know the color is lined up, then try the background image.
I am trying to create a CSS layout where the page looks like it's in the middle of the forest. There is a left and right div with the background trees, some header divs that show the top of the page with various wildlife, and some footer divs that show the bottom with more wildlife that matches up with the left and right div background images, all of which is positioned using "position: fixed" in CSS.
Then there is content in the middle that is positioned normally and scrollable. That all works fine.
The problem I'm having is that the background forest layout is fixed at 1204x768 but of course some web browser windows may not be that large. Unfortunately while the content will scroll as intended, the fixed position elements will never be shown if they are outside the size of the browser window. Clearly not acceptable.
I've tried setting overflow: scroll and height: 768 on the .body and .html elements in the stylesheet but no luck.
Note that I am positioning everything with top: and left: values in the CSS. I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn't line up.
This may just not be possible in which case I'll have to rework the graphic design, but if it is possible I'd love to know how!
of course some web browser windows may not be that large
Or indeed that small! The likelihood of the browser window actually being exactly the right size to put your decorations on the edges is quite small; that's always the problem with fixed layout.
I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn't line up.
Yes, designing images that can alter their joins in response to page size changes is more work, but it's doable. You would have to export the ‘bird+foliage’ layer and the ‘squirrel+foliage’ layer as standalone transparent images, then lay them over the top of a longer side image.
To make the object edges nice and smooth would require PNG's 8-bit transparency, which would necessitate a PNG-rendering hack for IE6. Not the end of the world though.
Unfortunately while the content will scroll as intended, the fixed position elements will never be shown
Is that a problem? They are only decorational in nature.
I've tried setting overflow: scroll and height: 768 on the .body and .html elements
For this approach you would need to set ‘overflow: auto; height: 768px;’ on a wrapper <div> which holds both your #sidebar-left and your #content.
You could have two pictures: 1) a right that contains the right trees and the bottom footer image and 2) and left image with the left trees. Make the bottom footer much wider than it needs to be and the trees (left and right) much taller than they need to be.
Then set the right picture to bottom: and right: and set the left picture to bottom: left:. This will force the pictures to always be on the outsides of the page, no matter the browser size. Then set the z-index of the right picture to be just behind the left picture. It will then always look like the page will be bordered. Or you can set a firm width and height on the parent container, and they will always be on the border of the container. You can also set a min-width and -height if you need to have a certain minimum sizes.
As for things not being visible at a certain resolution, you're really not going to get around this. You could have two sets of pictures, one for normal resolutions, and one for smaller resolutions. Then you can get the width and height of the browser with $(window).height() and $(window).width() with jQuery, and load the appropriate pictures.
EDIT: After looking at your site, i'm pretty sure the second part of that (setting a fixed width for a container, then putting a bottom right picture and bottom left picture) will work for what you want. That will force the page to be a certain width, and thus have the entire border visible.