I am developing a website in flex.
And in that, i am trying to set the background image of my application.
like this:
parentApplication.setStyle("backgroundImage", data.image_src);
From a different location.
My issue is that, the images that i have are small and hence they are being stretched when used as background images.
I want to avoid that from happening. How can i do it?
Please help me with the issue.
Regards
Zeeshan
Set the backgroundSize property to "auto" or to a fixed size.
The default for the Application
container is 100%. The default value
for all other containers is auto,
which maintains the original size of
the image.
If you want to tile instead, look at this post.
Related
As far as I noticed it's super popular and common problem, but all solutions that I have tried failed at the end.
I have a test-ish website: https://mojastrona.hekko.pl/baltyk-strona-glowna/
And what I can't achieve is to fit the background image to any resolution.
Here are my settings for the elementor section:
But that doesn't provide perfect image fit. It is being cut. I tried to add some solutions into .css file, that I have found on the Internet, but none of them works.
What you're trying to do is next to impossible (within reason).
Let's say your image has dimensions of 4:3. Now what happens if someone looks at your website on a 16:9 monitor? The container (and thus the image) would have to either have some blank space above and below OR to the left and right.
There are several reliable alternatives to getting what you want:
Position your image so that the most important pieces of the motive is always present (eg. "center top" so that the text in the top of the image is always visible
Add a "min height" to the parent container - the section would be the obvious choice. Playing around with VH/%-units might give you a more reliable result
Place your image as a simple image-widget instead of as a background-image. Set the width to 100%. Make sure your section is set to "Full width/no gap". Your image will now always be the full width of the screen, without being shrunk by the parent container.
Obviously #3 comes with several limits, as placing content on top of your image is made much harder.
I'm running into a problem. When I view my website on a computer and phone, it's built perfectly; but, when I pull it up on an iPad, the background images are like blown up. My website is http://www.zwdalpha.com/, any help will be very appreciated! Also, my Github is https://github.com/zcsmouse970/zwdalpha
To address the issue, you first need to understand what is happening. Background image sizes are handled with the background-size attribute, which you currently have set to cover. cover is great for large screens because it makes sure the image "covers" the height of the element. This allows for clipping on the sides to make sure it fills from top to bottom. contain is the opposite of that. It makes sure you can see the entire image at all times. It does this by making sure the width is 100% and the height is left to clip or expand. When you see on tablets and smaller that the images are "blown up", the CSS is making sure that the entire content area is filled with the image, and it does this by making sure the height of the image fills the content pane. Here's where we get a little more detailed.
You have your images setup as fixed. Obviously this was the effect you were going for, but lets think about what needs to happen here. Now the image needs to be covering the screen from top to bottom because it is able to be viewed anywhere the content pane is while being fixed. So now your image is covering the entire viewport. You can see the changes it makes when you change it to background-attachment:scroll;. It instead fits the image into the content pane instead of the viewport.
All of that being said, the way you can change this is by implementing media queries and switching backgrounds to cropped versions that are more appropriate to the viewing dimensions.
Your issue appears to be to do with background-attachment: fixed not behaving as expected.
Try background-attachment: scroll
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.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
I've made a simple website that is entirely scale-able...except the images. the body and all, the divs are set to percentages, in fact my purpose for designing this way was to practice making sites that would scale to any screen resolution. Everything went smoothly except the images, while the rest of the page grows or shrinks with the browser, the images either overflow or become tiny(when zooming in and out on browser). setting the image width and height to a percentage doesn't work because stretching the browser too far horizontally or vertically would cause the image to distort.
note:
I'd rather not have to hide the overflow, if I'm correct that would just cut the image off when it becomes to large(correct me if I'm wrong here)
and setting the height/ width to a max/min didn't seem like an ideal solution either.
but this problem seems to be one that I can't believe others have not encountered, so I hope someone can help me figure out a solution. please help, please...this is stressing me out :(
Style the img tag:
img {
height: auto;
max-width: 100%;
}
Now adjusting the size of the element containing the image will cause the image to scale itself accordingly.
Try setting just either height or width, whichever is more important to you. If you set both, the browser will follow your rules. If you just set width, the browser will scale the height down accordingly.
I'm working on a project like this as well, and I used
img { width: 100%; }
as well and then made sure to size the divs around each image accordingly.
I understand your concern about the images distorting at a certain size, but for me the ability to scale was most important here. I created the images so that they looked best at the size for my target audience.
If you create the images at the largest size you want them to look clear, they should also scale down, just be careful about file size if bandwidth is an issue.