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.
Related
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 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
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.
Right now im using one large centered image in my body tag.
First image is basically what the front page is going to be like. Looks great.
Second image has some content and pushes down the footer and the whole page. But still looks fine.
This last image has a lot of content and pushes everything down, even past the height of the body background image.
So my idea is too split up the background at the change of colour you see in the first image, where the footer starts, and add that as a background for the Footer DIV.
But the issue is that that part of the background goes on past the browser in the first image. If I were to put the BG in my footer DIV it would have to be 500px in height, resulting in scrollbars.
Essentially I want to put the the lower part of the background in my Footer DIV and have it act like the BODY, in that it won't create scrollbars.
I think that was clearer than my previous explanation? It's hard to explain!
So in the first screenshot the background is one big image?
Yes, you need to split the background up.
Now lets assume these things:
1.) You've set the background color of the body to black (and that black bar that is showing is the body background and not a part of the image.)
2.) You have split the image up so the bottom half is the background image on the footer div.
You can eliminate the black bar by making sure there are no margins pushing the footer div away from browser window, and making sure any default margins created by the browser itself are reset. (i.e. body { margin: 0;}) However, the bar can still show up in other browsers (usually Safari). One solution would be to set the background of the <body> tag to the same as the footer tag. This only really works with repeatable images though.
I'd say your best bet would be to fade the bottom of the image to black like you've done at the edges.
You can use background: scroll; to make the content scroll over the background, but viewed at different resolutions you could still see the bottom of the image.
i have a div that is 90x110 how do i restrict the background image i need to use to this size? background image is 120x100?
While the background image will be cropped to the size of your div automatically, in case there's any other content that doesn't stay in, you can always set overflow to hidden in your CSS:
overflow:hidden;
You can also resize your background images, if there's a need. Please have a look at this and this to see how it can be achieved (there are multiple ways).
Oh, you may also want to have a look at a similar SO question posted a few hours ago.
The div will not grow larger, the only portion of the background image that will be visible will be a 90x110 rectangle.