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
Related
I am using fixed background images in my ReactJS website. The image I am using in header area is getting weirdly stretched (zoomed-in, only a small part of picture is visible) even though the same CSS properties for different elements work well.
App.js
return (
<div id="main">
<div id="header">
...
</div>
...
<div id="bg-img1" className="background_image">
...
App.css
#header {
background-image: url("img/svatba.jpg");
background-position: center center;
background-size: cover;
background-attachment: fixed;
height: 300px;
background-repeat: no-repeat;
}
...
.background_image {
background-size: cover;
background-position: center;
text-align:center;
min-height: 326px;
background-repeat: no-repeat;
}
#bg-img1 {
background: url('img/svatba2.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
...
Now the image in the "header" element shows up zoomed, not covering the viewport as it should. The image in the "bg-img1" element is displayed properly.
What am I missing?
When you set the background-size to "cover", you are telling it to take that image and resize it (or "zoom it in" as you're saying) so that it covers the entire section (here #header).
If your hope is to have a header 300px high that spans the whole width of the page without losing any portions of your image, You would need to serve an image that shares the same proportions as your header.
For example, if your header is 300 x 1000, you could load an image of the same dimensions or of 120 x 400, keeping an aspect ratio of 3:10.
background-attachment
The way that background-attachment: fixed is commonly used is as a way to prevent a background image from moving relative to the viewport whenever the document is scrolled.
Note: For the purposes of this explanation, the viewport can be thought of as being equivalent to the browser window, although this isn't strictly the case.
CSS does this by basically taking the element's background image and attaching it to the viewport instead of to the element itself.
Since the viewport doesn't change its position when the user scrolls, the image will be statically positioned relative to the window. So far, so good.
background-size
Where we get into trouble with attachment is when we try to combine it with background-size: cover (or contain). Because background-attachment has already sent the background image to the viewport, any background position changes made through the CSS become relative to the viewport.
This is normally fine, but it means that when you try to use either a percentage value or a predefined size operator like cover, the background will also be sized to the viewport.
While writing up this summary, I discovered that this behavior is mentioned in the MDN documentation. The only problem is that it's just two sentences jammed in the middle of the percentage paragraph in the Values section of the background-size page. Yikes.
Demo
I've created an interactive demo to show the results of this behavior. To view it, click here.
The demo will display four panels, each with a different combination of sizing and attachment. Move your mouse over each of these panels to see how the background image is positioned in the container, and what's been hidden.
Fun fact: I made over 300 revisions to this demo before I was comfortable calling it done :P
Conclusion
In one of your comments below, you said (emphasis mine):
Cover was the culprit - but I have a little idea why. All the images
are landscape. The elements have min-height. I expected that the cover
will fix the width to the viewport, and that contain would fix the
height to the element height. Instead I see the cover zooming absurdly
(not matching any of the dimensions) and contain matches the width
(which is what I wanted). But why?
CSS often subverts expectations, and this is no different. For the cases below, assume we're using background-repeat: no-repeat.
cover scales the background image so it fits the element's largest dimension exactly and overflows the smaller one. This will generally cause it to be much larger than the element, showing only a portion of the image.
contain sizes the background image so it fits the element's smallest dimension and leaves blank space on either side of the image in the larger dimension.
But when you use background-attachment: fixed...
When you use cover, what you're actually seeing is the image being scaled to match the height of the viewport, since the height is smaller. With a landscape image, the height of the image will be scaled to the height of the viewport, which is why it appears so large.
When you use contain, the image is scaled to match the width of the viewport. If your element takes up the full width of the viewport, this will cover the element, cutting off the image's height, if necessary.
If you want to size the image using element-relative cover or contain, your two options, essentially, are to remove background-attachment: fixed, or to resize the source image so that your background-size declaration isn't necessary. Unfortunately, no CSS solution currently exists to enable attachment and keyword-based sizing at the same time.
I'm developing a wordpress theme and I'm having a bit of a problem.
In my homepage I want a wide background image with some text centered on it. So far pretty standard.
The thing is, I want the height to stay the same and as the browser gets smaller, the image should crop from both sides accordingly so the image stay centered.
Here is a great example I found, try resizing it and look at the big image at the top:
http://www.shopstyle.com/
How can I get this effect?
Thanks in advance! :)
You can use property background-size with value cover, which was made for that purpose
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
set the height you need (you can set different height for FHD, HD, Tablet, Mobile with media queries) and the image will be cropped from sides and zoomed if needed (if it's shorter than height you set)
Additionally to using background-size: cover;
You should use view port height to control the height of the image. This way it will always be a certain percentage of the view port height, no matter if it's a desktop, laptop, phone, etc. It's the more fluid way to display a height.
Example (covers the whole screen):
.yourelement {
height: 100vh;
}
Example (covers half the screen):
.yourelement {
height: 50vh;
}
Adjust accordingly.
I'm trying to get my head around background images within responsive design. In this example page (http://test.scoe.net/rfox/usalResponsive6/indexTeacher5.html), I have a large photo with some text and a few buttons overlaying it. I've taken great care to position and size the text and buttons at specific window widths: full screen, 1024px, 768px, 640px, 480px and 320px. At those widths, the layout looks reasonably good. It's the in-between sizes where things go astray. Things look ok at the larger sizes, but once I drag my browser window smaller, around 760px, the image itself starts to scale and I get large gaps between it and the next item below it. Any suggestions on an approach to take to keep it looking decent across different widow sizes?
That's a good start.
The problem is that the space allotted for text becomes smaller and smaller as the viewport becomes smaller. In your example link, seeing the hero at under 480px, the text only has ~165px width to work with because you're using percentages and so it starts to look awkward.
I suggest to swap out the background image for another that allows for more space for the text container. The bg image functions as contextual information anyway, and your text is your true content.
Your text container really should be almost 100% for anything below 480px. For an example that may be similar to yours, see https://fi.google.com/signup how their initial paragraphs only occupy the left, but as your scale downward, the text container spans across.
In your code:
#media only screen and (max-width: 479px) {
.zTchrBlurb-xs visible-xs {
width: 90%;
}
}
I encountered this problem as well in the past,
you could change background position to cover and adjust accordingly, but personally I found this library here - invaluable.
https://johnpolacek.github.io/imagefill.js/
One approach I took in the past working with background images that needed to scale:
background-repeat: no-repeat;
background-position: 100%;
background-size: cover;
width: 100%;
height: 260px;
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 a page where I need to display a photo gallery in a responsive website, with support for retina displays too.
The grid must be composed by blocks that fill a given container proportionally in this way:
If the screen width is >= 1200px the grid must be composed by 4 columns (25% width for each block)
If the screen width is < 1200px and >= 768px the grid must be composed by 3 columns (33% width for each block)
If the screen width is <= 767px the grid must be composed by 2 columns (50% width for each block)
All the grid blocks must be in 2:3 ratio sizes, and measuring a grid block with a 1980px wide viewport I can tell you is around 500px (this is not a limit, it's just a measure data useful I think for what I need explained below).
This can be easely achieved via #media queries of course, and using padding-top: 66.66666666666667% for the 2:3 ratio; I'm trying to give you as much data as I can to explain the limits I must respect.
So here comes the tricky part:
the thumbnails for the grid are of various sizes and aspect ratios, and I need to center them in their respective grid blocks, vertically and horizzontally, while fitting/covering the whole grid block area.Since the grid is responsive, I need the thumbs to scale proportionally along with their block for narrow viewports. To complicate things even more I need to support retina displays, so the thumbs must be double in size and downscaled by half, and fit in their grid blocks too.
How can this be achieved? (preferably only via CSS)
Additional data:
I'm using joomla! 2.5 as CMS for this project, and I need to give my client a very simple way to add images. The best and easiest solution I found is Simple Image Gallery: the only need I have for this plugin is the auto thumbs generating procedure + auto generated <ul> grid in the page, and is very simple to override the HTML+css output structure for my needs.
As for retina displays, it should be better to provide a correct #2x syntax, but I don't really care; as for performance concerns, I think that giving for all display a single downscaled image is more easy to handle, of course, but also a really effective and efficient way to handle the img weight!
See this for reference, basically you use images with dimensions doubled and a jpg compression of 20 or so, downscale the image by half with CSS, and you still have a nice looking image, good for both normal and retina displays. Also with a reduced weight from the original size image by up to 25%!
I've tested this myself and I can tell that this is working quite well, in very few cases I had more weight than a normal sized image, and by negligible amounts (compared to the ease and benefits).
Use a combination of techniques to do this:
Fit and Shrink technique
Centering an image in a box
Inline-block thumbs
Long question, but if its only about the centering of the images of different sizes you could do it like this:
You need Divs which you will float, those will have the same heights and wdths (you can adjust that however for the different queries).
After that you have another div in each of those divs for vertical and horizontal center:
<div class="outer">
<div class="table">
<div class="image"></div>
</div>
</div>
Basically, you float the outer div, apply display table-cell to the .table div, then apply vertical align middle, for vertical centering.
IMPORTANT
A floated div with display:table cell will ignore vertical align! Therfore the additional div!
http://jsbin.com/ajunol/2/edit
.outer {
height:100px;
width:100px;
border:solid;
float:left;
margin:10px;
}
.table {
height:100px;
width:100px;
border:solid;
display:table-cell;
vertical-align:middle;
}
.image {
height:50px;
width:50px;
background-color:red;
margin:0 auto;
max-width:100%;
}
Height, width and background color, obv you can disregard, but you should have max-width 100% so the image doesnt exceed the containing box.
In my example the images are represented as divs, but obviously you will have image tags there and not divs. To work with this, replace the divs with class image with images.