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!!.
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'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
If you go to http://digitaldemo.net/anova/ and resize the browser to make it smaller and then scroll horizontally to the right, you will see that the background now covers the part of the page outside the wdith of the visible screen.
Why is this happening?
Any help would be most appreciated!
Best,
Cynthia
Add this.
#navbar{ min-width: 1100px; }
same to .footer, .wrapper, and .footerbottom
min-width:1100px
The problem is because the #nav element has a hard width of 1100px and a width:100% background on another element is only 100% of the width of the viewable area.
Changing the min-width on the <body> to
body {
min-width: 1100px;
}
will set your minimum page width to be the length of your longest element and therefore the CSS background will extend as it will be 100% of 1100px wide.
For future projects I'd recommend reading responsive web design - one aspect being to design a site will adapt to the available width/height of a device, through a combination of non-fixed dimensions on elements and/or CSS Media queries.
I just debugged your code and found out the issue. The issue is you are using overflow:hidden property. It is causing problem. like in class (.masthead) you apply this. Just remove it. then it is visible.
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.