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
Related
I'm doing a website and i added a background-img behind my contact form. Firstly, some screen of my page:
Here's my page in fullscreen:
Here's my page when i resize it:
As you can see, the background-img of my div is repeated when i resize my page. I want it to keep the same size even if the image will be cutted. I tried to change the width but my div's width is changing too and that's not the behavior I want. I also tried to change the background with the fixed attribute but it seems not working.
I hope you will be able to help me !
Thanks
use these css properties
background-size: cover;
background-repeat: no-repeat;
I am creating a website as part of a University project and am tying to get a parallax effect on some images. I've been following the tutorial over at W3Schools...
https://www.w3schools.com/howto/howto_css_parallax.asp
My problem is that the images are filling the width of the screen rather than the div, causing them to be hugely zoomed in with the top and bottom cut off. Is there another way of doing this?
If you want to remove the zoom effect and show the parts of the image that are cut off, you can change the background-size property to:
background-size: contain;
Okay what i cant seem to figure out is I want any image no matter what size to fit to the browser window EXACTLY corner to corner as a background image. what usually happens is the BG image corners seem to overflow to where they cant be seen. like the browser uses the middle of the image sort of but i need it exact! ANy help, would be greatly apprectiated!!!!....
heres the page link http://www.bxwebdesign.com/stack/index.htm and
http://www.bxwebdesign.com/stack/style.css
You want to use background-size: 100% 100%;. This will fill the element exactly corner to corner with your image.
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size for documentation on this CSS property.
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
}
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/