I'm using a big image as background. However, it always resize automatically(Can't display full height of the img), How to deal with it?
One way is to set its height to the image's height. But when I'm reuse the class for other images, I have to change the height many times.
#HTML
div.img-bg
div.content
#CSS
.img-bg
background-image: .....
DEMO
Try background-size: auto; (the default value)
If you do not resize the background-image and use it's full size, your div.content should be as big as the image height.
So, as far as i understood, you set width to .content, now you can try to set height or min-height to fit the background-image's height.
Without height setted, I guess you have something like on the pic.
UPDATED DEMO
Related
I just want to create image with title and button on top.
Text and button should be in container with set width. I just want to know what is the best way to do that.
There are lots of way that makes you confuse on internet and I don't know which one is best!
If your background image has always the same aspect ratio, you can make the height of the container proportional to the width of the background image.
Let's say your background image is 2000 x 1000 px. And let's say the screen is currently 800px wide. Then you want the container with the background image to be 400px high. To achieve this without setting hard coded breakpoints, you can use the "padding trick". If you set the padding (top or bottom) of a child element in percent, it calculates the height as a percentage of the parent element's width. So if you set the the container's padding-top to 50%, it will be half as high as the the parent element is wide. So in the case of 2000 x 1000 px: 1000 / 2000 * 100 = 50%.
.parent_w_bg {
background-image: url(...);
width: 100%;
}
.container {
width: 500px;
margin: 0 auto;
padding-top: 50%; // Assuming the background image's aspect ratio is 1:2
}
<div class="parent_w_bg">
<div class="container">
Header and button etc.
</div>
</div>
In such a scenario you should position the container relatively and it's children absolute, for example the header with a top value and the button with a bottom value.
Here a simple fiddle: https://jsfiddle.net/mmcc5rnk/
Using multiple image sizes for different breakpoints can be useful, but also problematic. Depends on your specific case, the size of your image(s) and the amount of breakpoints you want to use (and the differences). Using different images according to some specified breakpoints is fine and can be used regardless of the implementation.
Setting a height for an entire section is never a good idea, unless specified in the project requirements. Always depend on the inner content to stretch your section vertically.
About the background - if you are using multiple images, you can apply different sizes and positions for them in one common background setting so that they can scale an re-arrange when the viewport resizes, or if you have one big image, you can simply set the image background size to cover like so:
background: url('images/image.jpg') no-repeat center center/cover;
There are many ways to achieve your goal, but the most up to date way of doing things is using the Flexbox model.
All flexbox properties must be prefixed, so they can work across all browsers.
Explaining how Flex works is too broad for an answer, so you will have to learn it from the ground up.
Here is a Fiddle that represents your aim.
No need to add different images for each breakpoint,
image will resize automatically, you can add dynamic height by using jQuery
Demo here
Im trying to build some fancy item grid by using bootstrap and flex. Therefore the item image always has to extend to 100% width of available space by keeping the 1:1 ratio.
http://www.bootply.com/kPLGHtA7Kh
I got it to work by using the css background image. But I struggle to make it look the same by using an img-tag. Im running out of ideas, hope you can help me.
In your CSS just specify the width: 100% on your image and don't touch the height (or set it to auto which is the default).
The parent of your image should also have a position:absolute or position:relative in order for the width to work properly
Demo : http://jsfiddle.net/s3spdy5z/
I think the images are pushing the width of the boxes to the max-width so kind of overriding the flexbox settings. With the background images you basically don't have any content inside them so flexbox can calculate the widths and not worry about content. The images are set to 100% but it thinks you want 100% of the max-width therefore the grid doesn't fit anymore.
If you set width: 33%; on the .flex-item and remove the min and max the grids will look the same.
I have the following CSS class declared for my base root panel.
#rootPanel
{
width: 100%;
height: 100%;
background-image:url("../images/green013.jpg");
}
My widgets are all positioned using %ages so they appear in the centre of the viewpanel regardless of the width of the Screen. Problem is with my background image. It doesn't repeat to fill the background which it does fine if I set my root panel dimensions to be say 800px and 800px. Seems it doesn't repeat if I use %ages for some reason? Any ideas what might be wrong?
If you want to get rid off the % height and width and set them in Pixel regardless of the browser size ,then use
RootPanel.get().setHeight(Window.getClientHeight()+"px");
RootPanel.get().setWidth(Window.getClientWidth()+"px");
Then apply your style.
yes, you are right. image is not repeat in %. for repeat image, you have to specify height & width in Pixel. I am facing same problem when I set into pixel, it will work!!.
I have my html and body set to 100% height, and a background image set on body, which gets cut off when scrolling down, as shown below.
However, YouTube has 100% height on html and body, and a background on body, and it stretches to the full height of the content. How can I achieve this?
If the only reason you put the 100% height is for the background (as one of your comments seems to suggest), then just change that to min-height: 100% and you should have no issues. You will have 100% height on short pages, but expand to as much as you need on longer pages.
You cannot extend an image unless you know the exact total height. The background image is "Extended" to the bottom. Often websites make use of an image that slowly "fades" to a solid color and then the background is set to that solid color.
Another common solution is to mark the background image as fixed so that way it doesn't scroll and thus always shows as expected.
The 100% height on the body is a scam... 8-) It generally represents 100% of the window, not the body.
A background-image will not automatically stretch to fill its container. If you want to create a 'continuous' background, you should use either the repeat-y property (which makes the image repeat vertically), set a background-position: fixed or, in the case of a solid colour, just set a coloured background.
In your case, it looks like your background is a solid colour. Might I suggest just using a plain background colour? It makes your CSS easier to read and change, and it also saves your server some bandwidth.
I have a div (div#slideImage) and within a few images.
But this is not div by adjusting the images inside that div.
See the full page.
Note that the size of the div (width: 75px; height: 28px;) is smaller than the size of the image.
I'm using the plugin jquery.cycle
This probably isn't what you were expecting, but can't you just resize the image? It seems to make more sense to me than expecting the div to do the work for you.
If you specify the dimensions of a div, then contained nodes will either be clipped or scrolled depending on the div's overflow property. Your best bet is to set the dimensions of the div to more useful values.