I have a simple div with width less than 100%, with a background image having background-position 100% 0. Instead of the bg image sticking to the right side of the div, it is getting cut off, and seems to think its actual right position is the edge of the body, not the div whose background it is.
.bg {
width:80%;
height:500px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 0;
background-size: 50%;
background-image: url(http://www.blackitty.net/photographs/photos/slideshow/slide/133/Tofino_2013-11-24.jpg);
}
I made a fiddle for it: http://jsfiddle.net/bobmeador/j2MWX/ The upper element shows the problem. Below is the full image so you can see what is getting cut off.
Any idea why it seems to be using the parent for its positioning rather than the div it belongs to?
I have the same result when my .bg div is set to width 100% and it is inside a div set to 80% width. It seems to be ignoring any container widths and just using the overall body width for its 100% reference.
I tihnk the problem is this background-attachment: fixed;, if you remove it the image aligns perfectly to the right.
http://jsfiddle.net/j2MWX/2/
Related
On my site, I want the body to scroll over my header image. With background-attachment: fixed, it works, but the image gets way too big after which my title is not readable anymore. In other words, the background-size: cover, doesn't work anymore when I add background-attachment: fixed.
Curious if anyone else has had this problem and if anyone has a solution for this.
Here is my code:
.site-header {
background: url("https://howtogetrippedathome.com/wp-content/uploads/2018/01/How-To-Get-Ripped-At-Home-Header-Image.png") top;
background-size: cover;
}
PS2, my site: https://howtogetrippedathome.com/
background-attachment: fixed will handle the image as if the element was 100% height and width of the viewport. Therefore background-size: cover; will resize the image height to fit the viewport.
Try using background-size: 100% auto; (100% of the width | auto will set the height in a way that won't stretch the image)
I tested it on your side and with that edit it works 100%.
Unfortunately I can not add a code snipped because it will size the background to stackoverflows viewport and not to the code-sippets viewport.
I have got so far on the background of my new website and now i am stuck, the background image goes less than 100% height if you shrink the browser window.
I want it to stay full size and if you shrink it, I don't want the height to go any less than 100% (showing white)
Code here http://www.bestlincs.co.uk/new/
you can use below code:
html or .classname {
background: url(ImageUrlhere) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use:
body {margin: 0; padding: 0}
and set the background-size property to cover: http://www.w3schools.com/cssref/css3_pr_background-size.asp
In your code you have not defined a height to the image give it a height 100% and it works i tried it in my browser and works fine
The solution depends on your needs - one way would be to specify a min-width and min-height attributes in css instead of pure width. As it will scale to whatever size it needs, then position it fixed to the top left corner (mind you, any "overflow" on the right will be cut off).
Source:
http://css-tricks.com/perfect-full-page-background-image/
A detailed explanation of your problem:
If you set an image to 100% width of its container and do not specify a height, it will always be stretched until it fills out the container, while the height is scaled to keep the image's aspect ratio.
E.g: Take an image that is 200px x 100px large, put it into a 300px wide container with it's width set to 100%. It will be scaled by a factor of 300/200 = 1.5 along both dimension, resulting in an image sized: 300px x 150px.
What will happen, if your image has a different aspect ratio than the user's screen? It will simply stretch to full width, then leave the rest blank. Setting a height as well would introduce even more problems, as your image would get distorted.
HTML:
body {
margin:0;
background: url(image.gif) no-repeat;
padding: 0;
}
Then the background size will be 100%
I used a background image with dimension 1120 X 714 pixels. The length and width ratio should be proportional w/ it's dimension so that the image will not look distorted.
The webpage that will use the background-image have a fixed width of 1024px. In my css, I have below:
body{
background: black url("background.jpg") no-repeat fixed center;
background-size: 1120px 100%;
}
The css above will make the length of the background-image 100%. Depending on the resolution or the browser dimension, the background-image will get distorted.
Width is not a problem here.
What are other approach for this having a fixed dimension of background image?
Should I use background-size: 1120px 714px;?
When you set the background-size: the first value is the width and the second one is the height.
So if you want to make the length of the image 100% then write:
background-size: 100% 714px;
I presume 714px is the height of the image...
You need not specify the background size at all. The code below should be enough.
body{
background: black url("background.jpg") no-repeat center center;
background-attachment: fixed;
}
I have a sidebar with 2 background images. This is my CSS:
background-color: #fff;
background-image: url('img/back-1.png'), url('img/back-2.png');
background-position: left top, left top;
background-repeat: no-repeat, repeat-y;
background-size: 100% auto, 100% auto;
when I change the width of the browser with the mouse (I use responsive design), the second image disappears in some position. But if I refresh the page or change the width, everything restores. Do you have any idea why does the image disappear?
I had a similar issue,
I made 2 classes of CSS,
Detected the browser width by JavaScript,
Attached the right one to the class by JavaScript;
I am having a great deal of difficulty with getting rid of the white space at the bottom when I apply a CSS3 gradient and the content has insufficient height for a scrollbar.
Such as here: http://womancareolympia.webs.com/
I have tried playing with setting both html and body heights to 100% or auto. I am able to make the gradient go to the bottom this way, but then when content requires a scrollbar, the content flows past the gradient.
Thanks for the help!
Add min-height: 100% to body.
Remove all instances of padding-top from body (or otherwise set it to 0).
Set top: 129px on #fw-container.
Set margin-bottom: 110px on #fw-container.
Add overflow: hidden to #fw-foottext.
(tested in Chrome+Firefox only)
I do think you should redesign your CSS to not use stuff like top: 100px and margin-top: -50px all over the place. There's just no reason for it.
I had the same problem. This can be resolved by adding the following properties to the body element (where the linear gradient has been defined)
body {
background-image: linear-gradient(
to right bottom,
var(--clr-primary-100) 0%, // Random colors
var(--clr-primary-900) 100%
); // Linear gradient
background-size: cover; // Add these properties to your body tag
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
I hope this helps. Let me know if you face any problems.