My <div> background is shows half how can I fix it.
It shift all my background images to left and half right goes white in IE
here is screenshots
http://scrshots.blogspot.in/2014/11/1st-screen-shot.html
If it's a background for whole page try to attache it to body. If it shows only half of image most common problem is something mixed up with divs. If you have more background images try to provide a frame for them (separatly) using divs. Also are you sure that position should be absolute not relative?
body {
background: url(main-bg.jpg) no-repeat
}
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.
If I want to use a background image positioned at 80% on the x-axis, and the image width is 30%, my understanding is that the image should be partially disappearing on the right side (starting at 80% and ending at 110% of the div's width). However, it seems that the browser decides to align the right side of the image at 80% - but if I changed 80 to 20 then it aligns the left side at 20%. This is really strange behavior and a problem for me.
Here's a fiddle to illustrate what I'm talking about:
https://jsfiddle.net/qzbrkbcz/2/
The first background image is correctly positioned and the second is right-aligned.
How do I make sure that background images always have their top left corner positioned at the background-position value?
The background image will position itself according to it's own size. So if you want it to go out of the container, you'll have to use something like background-position: 250% 100%;
https://jsfiddle.net/maxpaj/qzbrkbcz/6/
Good luck :)
Problem occur on Sambungs tables. I have background image set on body.
Css look like
html, body{
background: url('img/background.jpg') no-repeat;
background-position: top; // i tried also cover, fixed etc
}
Webpage is quite high, like over 2000px , where background image takes first 600px, and it could be fine for me, but when i click to hide some box on the bottom of the page, background will automatically appear at the visible part of a screen and it will be eareased from the top of the page. Page isn't realoading during hiding boxes on page, that's why I don't really know how to solve this problem.
Any suggestions ?
Problem solved. I had to input background into div#wrapper. It solved my problem with rendering of background image
I'm trying to set a background image to fullscreen, and on window resize the image doesn't change actuall pixel size, but get's smaller (crop-like).
This is what I mean: (Try to resize window and notice that the picture gets smaller or larger but doesn't pixelate) http://jsfiddle.net/G7Qc4/
Now, the above works because of the image is a background of a div and I've set:
background-position: center top;
If it was just plain <img> it doesn't work which my question is how can I make it work? If there is any way around?
I am using the nivoSlider which doesn't accept div's for image's so I will have to use <img>.
Thanks alot
If I understand, you want to use an actual tag as a background instead of background-image.
Here is my solution:
http://jsfiddle.net/ttZeM/
It requires knowing the dimensions of the background image.
There is a div holding the background which is absolutely positioned, the site content is absolutely positioned on top of it.
To center the background image, I moved it -500px to the left, which is half it's width. It is inside of a div that is 0px wide, being centered with position:absolute; left:50% a strange technique, but it works if you know the image size.
Also note that the bg_wrap div has overflow:hidden; and width:100%; this means you won't see scrollbars off the edges of the screen.
I hope this is what you were after!
It can be done with CSS3 (background-size: cover), like so: http://jsfiddle.net/mqchen/Kq3pa/
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.