I'm using media queries to mobilize a website. Everything seems to be going fine except that the background image wont resize as the foreground image does at the top of the page. My media queries take effect at 650px and are in the file junkyardzombie.css at the bottom of the file. Can some please help me with this issue. The test site is at http://shoponlinedemo.com/junkyard-zombiez/
By default, a background image is a static size(the size of the native image). You can control the size of a background image using the background-size property(read more about it here).
In this scenario, you can use background-size:contain; which will constrict the dimensions of the image to the width of the containing element(or to the width of the browser window if there is no containing element).
Related
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.
Why are the images for the cards component being used as a background instead of the image to fill up the media portion of the card? cant we just use the image tag instead?
I am trying to use the MDL framework to make a tumblr template
but having trouble implementing the card component for the images posts since tumblr uses image tags
please explain why MDL is using images as backgrounds for the card component
Nothing is really holding you back from using the img tag. See this as an example.
However using images as background of divs has some advantages:
Right clicking on the image does not allow you to download the image
You have more flexibility in terms of responsiveness (e.g. by using background-size: cover to fill the div). UPDATE: even though you can set 100% on width/height to adapt the image, cover keeps the aspect ratio and in general provides better results.
Since your image is just a background you don't need to set its position to absolute to let other elements inside the div be positioned over the image (as it is the case in all of MDL examples)
Do we have any specific height for the initial display of the page in different devices.
I want to show a header image on load of a page, on scrolling down more content appears. For fitting the image in view area for different devices with media queries, I use width as 100% but for height I have problem in understanding?
If your width is set to 100% then your height should be set to auto. The image will be responsive and adjust to different screen resolutions without deforming.
Thankyou both!!
I used CSS3 background image properties, instead of fighting for height. Issue resolved. :)
So I've spotted a few sites lately where the background above the fold always perfectly crops to the viewport. For example - if you look at http://startbootstrap.com/templates/grayscale/ or http://simplesimple.co/currency/ on a mobile, tablet or desktop device the background image always fills the viewport even at different orientations.
It's not as simple as adding a max-width: 100% to the image as this would only fill horizontally. My first thoughts are that it is the art-direction use case, where breakpoints target different crops of the image. It seems like a lot of work to achieve this effect though so I wonder if I'm missing something.
With reference to http://startbootstrap.com/templates/grayscale/, the main banner image has been added as a background image and its background-size property has a value of cover which will stretch the image to fit the screen at any size.
Then there's tricks like setting the main section tag to have a display property set to table which allows its child div (containing title and sub title) to be vertically centered with display: table-cell and vertical-align: middle
Its built on twitter bootstraps framework which has grids and media queries built right in allowing for different images to be added via the background-image property for each screen size
I'm working on a site with a scaleable background image that fits the browser window, but am having issues when viewed on small browser windows.
When the page loads initially on a tall browser window, the image correctly anchors to the bottom of the browser window, and scales when the window is resized - ie, when the whole page is contained it's fine. However, if the page length exceeds the initial window height, when the page is scrolled, the image scrolls up, leaving a gap.
Here's a page to demonstrate (try it with tall window first, then short window, refresh and scroll down to see the problem):
http://kevin-atkins.co.uk/slc/about-us.html
How can I get the background image to fit to the bottom of the browser window and/or not leave a gap when scrolling?
You need to specify a width\height so that it can resize itself correctly.
Seeing as you have used css to set the background, you can use CSS3 Background Size. Most modern browsers support it, like follows:
#about-us {
background-size: 100%;
}
Alternatively, you can use an image tag and style that correctly (width\height) which takes up 100%
Reference:
Background Size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Hope this helps.