I admit in the beginning that I am new to UI development and started learning recently. I am developing a website which i similar to InuitLabs.com. When I looked at the source code using view source I am totally lost. Particularly I am interested in knowing
How the slider image on the homepage is responsive? Is it through javascript or using pure css.
Also I want to know the text moves upwards on scrolling leaving behind the background image intact? How to achieve the same effect.
I know this might be the basic question but I found it hard to know through the source code as there are many javascript and css files.
Regards,
Pradeep
Take a look at the background-size property.
you can set background-size to any px or % value or use constants:
cover will adjust the image size to fill the entire container while contain try to fit the image inside the container without cropping it, most likely leaving some parts of the container without any background.
What you probably want is to set your background-size property to cover.
you just set the image to the percent you want in % through css for example:
.slider img {
width:100%;
}
edit: also you need to specify the height as auto, if you do not want to lose the image ratio. if you set width and height at 100% the image ratio will be messed up.
if you want to set responsive height also for longer device then use width:100%; and height:100%; other wise you can use height:auto; make div and keep it background-size property for it.
Related
I'm using HTML5's <picture> tags to create a responsive header that will stretch the entire width of the browser. The header uses an image as the background.
For larger screens I limited the height to a defined value. However, I noticed that a certain breakpoint the image starts to stretch and distort the image.
I'm familiar with using CSS's background-image: url(); to create a mask in order to prevent the distortion, but I don't know what best practices are with <picture>.
My code currently stretches and distorts the image. Is there a way to 'mask' the image?
First thing you should know is that if you will give height to any image then in some screens it will stretch.
So instead of giving the height you should take the image of exact size it will do the thing.
If you can share the code I can fix it and send it to you.
Hope it helps.
User zgood was able to lead me in the right direction. Adding object-fit: cover to the <picture>'s <img> tag got the job done.
I have the following:
<div style="container;background-image:url('/images/football.jpg');background-size:100% 100%;">
I would like to manually adjust the width and height of the image. I currently have it covering the full width of the div, but not the full height. Is there a way to manually adjust the size in percentage form while maintaining no-repeat of image.
As mentioned
"background-size:"
Is what you are after however I thought I'd just add a little bit of helpful advice and point you towards W3schools.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
I only recently got through web development at Uni and W3schools was the single most useful source of information I had access to (don't tell my lecturer that). If you get in the habit of looking there first it'll help you out a bunch.
Also might be worth learning how to use external style sheets and linking them into your HTML.
Hope this helps !
background-size: 100%;
will adjust the image proportionally to 100% width of the background area.
If your image size is less then background area then use
background-size:cover;
to stretch it so that the background area is completely covered by the background image.
If your image size is greator then background area then use
background-size:contain;
to shrink it so that the background image is completely fit in the background area.
Before anything, I won't provide any of my code because I don't want to use it anymore, i'd rather start fresh with some new ideas
I have to make a div that has a navbar and a background-image in CSS, resize with every resolution, I tried using VW and VH, but whenever I tried resolutions like 1280x1024 and 1024x768, the image would keep it's ratio but would only fill the page width wise, as if there was some margin or padding on top and bottom...showing that the vw and vh were not working.
So my question is, what is the best way to resize a so that the background will always fill the page, even if some of the image is cutout.
Here's an example of a website I found that works exactly the way I had in mind.
http://bigdropinc.com/
Thank you in advance
In CSS use
background-size:cover;
I am fairly new to html/css and I am coding a website for my mom. (Live example here: http://jleblanc.pancakeapps.com/index.html) and for the life of me I can't make the photos any smaller. Do you guys have any ideas?
If images are set in following format:
<div id="PlaceHolder"><img src="source.jpg"/></div>
You can add rule in CSS:
#PlaceHolder img{
width: 400px;
}
If you set height or width - it will automatically resize image maintaining it's aspect ratio.
Assuming you're talking about the oversize background images in your colored tabs, the problem is that you have background-size: contain set which is scaling the image to the container size. Choose another background size (background-size: (x)% (y)% maybe?
(You'll get better answers if you reduce your question down to the specifics of what you're trying to do and give example code of what's not working, rather than just linking to a website and asking what's wrong with it)
You can set image as responsive by making them size to 100% so they can fit any size.thanks
I'm working on a website with a em-based layout (so it can stretch and compress gracefully when users increase or decrease font size). This site has a header that should be displayed across all pages. I have a "header" div in all pages, and the site-wide css file includes the code:
#header
{
width: 50em;
height: 6em;
margin-bottom: .5em;
background: url("/IMAGES/header.png");
}
The problem is that this doesn't really stretch gracefully. When text size increase, the height and width change, but **the image doesn't increase in size; it simply repeats*.*
How can I make my image stretch and squish, instead of repeating or getting cut off? (I'd like a css-based solution if possible... I've got some html ideas in store, already).
There is no way to use css to strech a background image. You would have to use javascript or something similar. However, if you have an image that doesn't need to be repeated (e.g. blends into the background), you could do something like this:
background-position: center center;
background-repeat: no-repeat;
Addendum: The position has the following format: <top|center|bottom|xpos> <left|center|right|ypos>
where xpos and ypos can be given in the regular fashion (em, px, %, etc...).
The only way I've ever found is:
Set background of #header to bgcolor of header image.
Place new div inside #header
Split header image into 2
Set left half of new image as #header background aligned-left
Set right half of new image as #header.div background aligned-right
Of course that's only going to work with appropriate images though.
I'm pretty sure you can't change the scaling of background images. If your header.png file was included as an img tag, then you could set its height and width to be a number of ems and the browser would resize it (usually making it look like crap though).
Remember as well that pretty much all the modern browsers do page zooming these days, which will scale everything up without changing your layout too much. Perhaps tell your users to use that feature?
#Pianosaurus, I think your idea may be the simplest, although limited. Simply, don't stretch the image, but make sure it looks good when it's not stretched (center it, and don't let it repeat). Also, if you use a fair amount of padding at the edges of your header image, sizing the page down wouldn't cause such big problems, either.