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;
}
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 a container div of unknown size*. I want to fill it with an image of unknown size such that the image completely fills the div, maintaining the aspect ratio.
Then I want to center the image so that the cropped parts are at the edges.
I also need a way to ensure that the container's padding doesn't show any of the image.
*If it helps, the container's size isn't really unknown. It's a Bootstrap column so I can compute the width if I need to.
Solution
These styles did the trick:
background: url(...) no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
This can be easily achieved using a background image. After you've specified it as you'd like, just add the following CSS to your container to make the background certainly cover its container, while keeping the aspect ratio:
CSS code
.container {
background-size: cover;
}
This will not take maximum size into consideration, and will stretch the image beyond its native resolution, resulting in potential blurring.
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 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/
I have a 200x100 rectangular image, and I scaled it down to 50px while preserving its original aspect ratio by using
max-width: 50px;
max-height: 50px;
I would like to give it a circular picture effect so border-radius: 50% was used. However, this won't work and will give me an oval shape image as the image is not a perfect square. How would I approach this problem while preserving my original image aspect ratio? I am also ok with having white stripes around my image to fill in the gap and make it a square.
Thanks
In a nutshell:
.my-ele {
background-color : #000;
background-image : url([URL TO IMAGE]);
background-repeat : no-repeat;
background-position : 50% 50%;
background-size : 100% auto;
background-size : contain;
width : 300px;
height : 300px;
border-radius : 50%;
}
Here is a demo: http://jsfiddle.net/ArURx/1/
I would use a CSS background property to display the image. You can set your element to be square, whatever dimensions, then set it's background image as the image you want to display and set background-size to contain for modern browsers and something like 100% auto or auto 100% for old browsers (depending on whether you want full-width or full-height).