I am trying to implement a full page background image as discussed here.
I am using the first method, the CSS3 technique. However, when I use background-size: cover like the author suggests, the image is "zoomed" in way farther than it needs to be and I don't understand why.
Is it a problem with the size of the image or do I have something else wrong?
Here is a link to the page.
achievable I want to see the entire tree, trunk and all. I've already tried setting the background-size to "100% auto" and the effect is the same. I've also already tried background-size to "contain" and now the image is too small.
No JavaScript solutions please. I know this achievable with just CSS.
UPDATE
Contain looks good on a desktop site, but it looks bad on a phone/table. Cover looks good on a phone/table but bad on a desktop. I guess I'll use the one that looks the best on each device?
UPDATE
I think I could use contain across the board, I would just have to resize the bg image to be thinner for smaller devices.
I believe we can suffice this requirement by using following two Solutions:
a. Use background-size:100% 100%; I am able to zoom image properly by using this Solution.
b. Use img tag with height and width as 100%
Change background-size: cover to background-size: contain
It looks perfect this way!
Related
We are using the background-image style for one component in our application. we need to make it responsive with different resolution images. I have seen that we can make use of image-set to achieve it and implemented it as below and working as expected.
Please see the below code snippet I have implemented.
<div style="width: 50%;height: 50%;background-repeat: no-repeat; background-image: -webkit-image-set(
url(smallCat.jpg) 1x,
url(BigCat.jpg) 2x)">
</div>
Now, I would like to give a specific resolution of the screen in place of 1x,2x.
Since it is possible in srcset with sizes, do we have any way to set sizes for image-set?
Please let me know your thoughts.
Thanks.
Nah, there is no syntax for this. But:
Another difference, is that unlike with the srcset attribute, where you can also give image options based on the width of the browser (when art direction is required), you cannot do that with the image-set. However, art direction can still be achieved in CSS using media queries!
Source: Creating responsive images with image-set
So, if you want to rule all the images using CSS only, use media queries.
I have no idea how to fix this. I've included a picture of the site.
This only happens on larger screen monitors, for some reason. On my 14" laptop, its' fine. Anyway, is there any way to ensure that content starts underneath a background image? And not overlap it, as shown.
Thanks so much for any help.
https://i.stack.imgur.com/6PbUr.jpg
Well, it's complicated to work with css relativization when your main image of the site (the takes nearly all the screen) is into background or other rules that don't fill the rest of the elements. The best that you can do is to relativize body.home margin-top with percentages, but I highly recommend that you put that image inside a div container with width 100% and background-size cover and start to work towards that. Any other solution will be hacks and lacks of good practices, because if you want (and one day you will) change de background-image, all your elements will need a new proper location, obliging you to change css every time.
I've noticed that when displaying small images with a scale of 1:1 they often look blocky. I can overcome the problem when using the <img> tag by using a larger scale image and setting the desired size with css.
But, I'd like to load my images with css with background: url(...)
When doing this if I set my element size to less than my image size then the image is only partially displayed, I can overcome this using background-size but I understand that this isn't very cross browser compliant?
Take a look here to see what i mean http://jsfiddle.net/uSqJW/
yes you can do this by background-size property but you need to remove that background position or make it 0px 0px from left and top respectively. This property will not be functional below IE9.
AFAIK background-size is the only way to set the size as there is no ratio option, but it is well supported - see http://caniuse.com/background-img-opts
This is a good article about the benefits and machanisms of loading higher resolution images http://www.html5rocks.com/en/mobile/easy-high-dpi-images/
Is there a way to make a HTML5 video (and the poster attribute) to act like a centered background cover?
I've created a dummy pen you can play around width:
http://codepen.io/SEFarstad/pen/vujqE
The layout is based on two 50% width sections, where the left one will contain the fixed video and the right one will containt the absolute positioned content.
The main problem is that my design needs to be split vertically, making horizontal videos an issue. Is there a way to make these horizontal videos full height in a vertically based layout it like this? -in the same manner as you use background-size: cover;
I know you can use background videos etc but I need this to have controls, posters and so on to meet some interactivity demands I have on this project.
I know this is an old question and you've probably moved on to other things, but I wanted to answer just in case anybody else stumbles on to this via Google. What you were looking for was object-fit, a way to add that kind of behavior to videos and images. Here's some info on it, but basically you just need to write it like this:
video {
... // other stuff here
object-fit: cover;
}
Sadly, you can't use this on every browser just yet. However, there's a polyfill you can look into.
Does anyone know of a method where I could have a CSS rollover image with a percentage width so that it scales with the size of the page?
I presume that I wouldnt be able to use the method shown here http://www.vision.to/css-only-single-image-fast-rollover.php because that sets the image sprite as the background image.
The only other CSS method I have seen was here: http://thefiles.macadamian.com/2008/06/pure-css-image-rollover-without.html
I like this method but was wondering if it were possible to use one image sprite as opposed to having to load the images separately.
Sorry if I sound very vague, whenever I read these questions I always think the people writing them dont describe what they mean properly and now I've come to do it I'm no better myself haha.
Thanks for any help :)
I don't see how you could do this with sprites. They're done by setting a large image as a background for an element, usually a DIV, and then altering the position so that only the desired portion of the image is shown. Different DIVs can show different parts of the image by altering the background image position.
However, you can't scale background images. They're always shown at 1:1. You can make them repeat within the element, or not, but you can't scale them, so the sprite idea is out.
Doing it with separate images is fairly straightforward, as indicated by the link you posted.
Preloading an image for rollover is pretty simple. Just include an image tag with the CSS set to hide the image:
<img src='myrolloverimage.jpg' style='visibility:hidden; display:none;' />
If you don't need to support IE8 and earlier, you could use the CSS3 background-size property with percentage values.
As with foreground images, a sprite file most likely wouldn't be a reasonable option. There are added complexities with sprite files when the image is scaled. The background-position is based on the scaled size of the image, and getting an accurate position using percentage values is problematic.