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;
Related
I am working on my first portofolio project (I'm taking a course on Udacity).
I have studied a bit about Responsiveness lately, but I'm having a hard time wrapping my head around it and understanding which is which (flexbox/ grid system). Therefore, I'm not even sure what I used by now. Grid? Flexbox? I'm completely confused.
The problem I'm currently facing is how to get rid of spaces between content rows when making the page responsive (for example when the viewport is smaller than 1200px, the gap between my main image and the rest of the content gets HUGE).
Please help me.
Here's my code overall:
https://codepen.io/antobloop/pen/LdjZmW
#media screen and (max-width: 1250px){
body {
???
}
}
And here's what im talking about:
Gap between content
You have a 600px height set on the .image so when the page gets more narrow, the image fills the top portion and you see a gap in the empty space.
I changed styles on .image from
height:600px;
to
height: 0;
padding-bottom: 56.25%
This is a little trick to maintain the 16:9 aspect ratio on the container that sets the overall height based on the width of the parent container.
https://codepen.io/Jason_B/pen/dmzpmq
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'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 building a website with a 960px design, but the designer has also requested that the page have a full-width background photo across it. He has supplied a 2000px image for this.
However, trickily, part of the photo is integral to the navigation of the page, so the image needs to be centred. So I want the left and right edges to overflow out of the viewport. I've tried to do this using CSS, but have failed.
I could do a javascript version to adjust the left margin based on the viewport when the document loads and the window is adjusted, but I expect it may perform badly, particularly on the adjustment. A lot of the target audience of the site have some serious legacy hardware, so will be using slow computers running IE6. Is there a good CSS way of doing this which would perform better?
UPDATE: Sorry, I wasn't very clear in terms of the "full-width" thing. The content of the site is all restricted to a 960px column, except this particular image, which should be the full-width of the browser window, even if it is greater than 960px. Using background-position is the method which I've already tried, but if I size the particular div to 2000px wide, then I haven't been able to center the div, whereas if I set it to 100% the background-position:center doesn't seem to work
One way you could do this is with background-position: center top;, put the 2000px image as a background to a 960px div like this:
DEMO
As far as I'm aware this is supported on IE6+
Just use background positioning.
body {
background: url(blah.jpg) center top no-repeat;
}
Try something like this on the image:
position: absolute;
left:50%;
margin-left:-1000px; /* half the width of the image */
However, if part of the image is going to be used for navigation, and it has a fixed 2000px width, i see a lot of tears in your future.
Consider dividing the image into layers that can be manipulated individually.
EDIT: As mentioned by Michael this approach is not good.