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.
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
http://www.otislandscapeassociates.com/about/
I am experimenting with a banner ( the landscape image of twigs), but i am having difficulties in making it responsive across devices, e.g desktop, tablet, mobile without the image being stretched or not fitting correctly or being cut off at either end.
Would like some advice on how to get around this, also if i need to adjust the dimensions of the actually image, is it to big? Should it be smaller? etc.
I am currently doing everything in css, so this is my preferred method of modification.
Thanks in advance.
You can try
background-size: contain;
its the easiest way to make a background image to be responsive.
But note as the width adjusts with the screen width, it will also make the image proportionally reduce in height.
I can see you have a fixed height and already use
background-size: cover;
which is what i'll normally recommended if you want it auto fill the container irrespective of the size of the container.
You cant have both (not stretched & always fill irrespective of the size of container). Looking at the image ( the white space that blends with the page & assuming its a must use) i suggest you add this to the class so it remains responsive but always fixes the design at the bottom of the div so it can always blend into the white above. Let me know if you need any clarification or questions
background-position: center 100%;
I have a large background image that is a specific height and width which I'm happy with for desktop. I'm using background position centre top atm, so I can see the entire image but width is cropped as browser width is reduced.
There is a specific central part of the image that is the focus, so once I reach a specific browser width (around 1000px - where the image is cropped on the width), I'd then like that viewable area of the image to respond down to mobile retaining the visible cropped width that the browser has dictated... is this possible?
Many thanks
I dont know what you exactly mean but I think that you want to use a media screen.
#media screen and (max-width:1000px) {
img{
width:100%;
}
}
Reply on the post if you mean something else I will help you out :)
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;
I'm making a responsive blog for both mobile and desktop users (all in one). With respect to image resizing, I understand that I can use width:100%; height:100%; so that they scale proportionally depending on the page size, but I've noticed that smaller images upscale to fit the width of the DIV that it is in. Let's say my DIV has a max-width of 640px but an image I include within it in 500px.
What CSS can I use to keep the image at 500px and then scale down proportionally if the resolution width falls below 500px?
The reason I'm asking this is because not all images in posts may be 640px wide.
Set your image max-width property to the actual image size.
Why don't you just set max-width:100% and leave width off.