I'm trying to simulate something like iOS7 style, with frost blur background.
I have a image background on body and sidebar which should look like iOS7.
the problem is that I cannot match body and sidebar positions.
Also this sidebar will move up and down.
Here is a jsFiddle: http://jsfiddle.net/K9BCq/1/
problem is that I use background-size: cover on body and since sidebar is statically 200px wide, they will never match exactly
I just tried using this and it worked for me.
background-size:cover;
bacground-position:84%;
This will work but you have to manage the background position according to your sidebar position.
http://jsfiddle.net/K9BCq/2/
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'm working on a website for a friend of mine. There's only one problem. The slider won't fit in the frame without stretching.
I've set it to 100% height, but it won't work out. (Its also responsive)
I want it to be a nice image in the original width and height (100x100, 200x200 etc) without stretching (200x500).
I hope you guys can help me out on this.
I'd tried alot and also asked some other people but they can't help me with this.
You can see the slider over here.
http://tinyurl.com/p36hz6u
Here's another version of the slider, but on this version the slider image gets cut off
http://tinyurl.com/nfjjvwu
If the images are background images, consider using the background-size:contain; which will allow the image to grow as large as visible/possible without stretching, and then you can position the background image wherever desired with background-position
If the slides have actual physical <img /> tags, I made a JSfiddle that demonstrates code that will contain an image within an element. In this example, the <div> tags represent a browser window and can be resized: http://jsfiddle.net/dds27w2y/
Firstly what I would do is to remove the: background-size: 100% 100% and add a background-position: center center.
Then I would add a background-color: white to the container. This would make it look nicer and it would be centered.
http://www.barrdisplay.com/
Hey everyone - So the site I am working on has a header background that extends off the screen to the right.. My issue is that horizontal scrolling now occurs because of this.
My #Header has a width of 1450px - which is causing this issues.
How can I fix this issue?
Greg
use in your css
body{
overflow-x:hidden;
}
Note:It will be good to have a read and then use
http://css-tricks.com/the-css-overflow-property/
Header is a div box. If it is set to 1450 then the div is that wide and causing the horizontal scrolling. Set it to something smaller or a percent (like 100% which will go to the end of the page what ever size it may be) and the background will fill it in to that point.
If you need the background to stretch the entire way, then put the header background as a background for the page and tell it to not repeat and place the center of the image in the center of the screen.
This is the problem
http://screencast.com/t/Dgfd5vTeEY
This is the site
http://eotomarketingsystems.com/
I have looked everywhere but the only method i got the background image to be full width. was by using the method here: CSS Tricks—Full Background Image,
but it was made background-image fixed which messed everything up. is there a simpler way to just make it reach that area after you scroll to the right?
Now Define min-width in your body css as like this
if your main wraper width is 980px;
than define your
body{
min-width:980px;
}
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.