I'm trying my hands on responsive design in CSS but is stuck on one problem.
I have a background image in my CSS that is resizing when I'm changing the browser size. The problem is that I only want it to resize in width and not height. Is this possible?
So what I would like to achieve is that when I resize the window the height of the background picture should be static but the width would be resized.
The classic "stretch-to-fit" would be perfect for me.
Use CSS
background-repeat: repeat;
Sometimes you only need to write to find the solution. =)
The css function background-clip: content-box; solved my problem.
Related
Can anyone explain to me the concept of images to be responsiveness? And where we should use width and height for images some told me that .it is not correct to take width and height for images can anyone elaborate.
For image Make width:100% and height: auto; that will work for responsive.
but the parent element may or may not have width. Fixed width and fixed height is good practice.
When you use responsive images in your page it means you show different sizes of an image based on screen size. for example, on mobile screen you show a smaller image and on desktop screen you display the same image but with bigger resolution. this logic can be done through html or css.
If you want fully responsive image - you can use div with background image, background-size: cover(or 100%) and background-position: center center
everyone!
I guess my problem is simple, but I can't figure out how to solve it :/
I would like to make an Image full height and full width, and when we resize the windows' width, the image resizes correctly like this example:
https://avada.theme-fusion.com/resume/
I already tried to play around with the width and height, but I can't have the same result
Thank you for your help !
The property you're looking for is background-size: cover.
body{
background-image: url('https://avada.theme-fusion.com/resume/wp-content/uploads/sites/66/2016/07/home_bg.jpg');
background-size: cover;
background-position: center;
}
You'll need to use a css background-image instead of an <img/> to achieve this result.
Here's a demo: https://jsfiddle.net/7rqm0mtb/
It would be ideal if you could post the code you're working with in order to get a better understanding on how you're going about this.
The Avada link you posted is using the image as a background-image, with the background-size property set to 'cover'. Take a look at this example on w3 schools.
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.
i am building a landing page, it must be responsive. but i have one small problem. i am having trouble while trying to define the background image. what i want is that on landscape mode the image will take the full width of the device screen but also to be in its full height like in this example
i see that they are using some framework, how can i do it without any framework.
when i try to do it i use background size:contain, but it maches the background image to the device screen height.
i have seen some exampels i which an image is placed in the html and it is converted to background image. i think that with z-index: -9999;like in the example i gave . but when i try it the image does not go to the background.
Any help would be great
You can use vh and vmax to do this.
An example:
CSS:
#im-full-height {
background: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Philippine-stock-market-board.jpg') center center no-repeat;
background-size: 100% 100%;
background-position: contain;
height: 100vh;
}
HTML:
<div id="im-full-height"></div>
Demo
A demo based on your JSFiddle link: https://jsfiddle.net/z1L12opp/2/
You will find below the demo of the JSFiddle I created that fits your need. I used new CSS dimension property vh, which let the element take X percent of the Visible Height.
Refering to the Can I use website for vh property, your code will not run in IE8 and below, and may probably not work properly in further version.
editable JSFIddle / Full screen JSFiddle
EDIT : the background follows the scroll
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