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.
Related
I have been doing some HTML and CSS and have come across a problem that I hope someone can help with.
I am trying to make a full width picture cover a whole Div without a significant loss of quality to the picture.
An example of what I am trying to achieve is similar to the following websites:
https://sso.godaddy.com/v1/?app=mya&realm=idp&
http://www.ugle.org.uk/
Both websites use a picture which quality seams to not dissolve through being expanded or contracted.
How is this done?
Any one know of any tutorials or have example code that they could show me. I have created a picture that can vary to the browsers window size but its quality is awful when the browser changes size.
Thanks in advance everyone!
Very easy. There are a few ways to do this, but the most straightforward is to set the image as the background of the div, with the background size property set to cover: background-size: cover;
For example (CSS):
div {
background: url('path/to/your/image.jpg') no-repeat center;
background-size: cover;
}
Edit: Addressing image quality:
You'd need to make sure your background image is equal to or larger than the div's dimensions. If it's smaller - it'll be stretched to fit (this degrading the quality).
I´m trying to code a header image similar to the one on this page: http://www.eltrecetv.com.ar/nosotros-a-la-manana. Pay attention to what happens to the image of the guy when you resize the page. It stays in the same place, it´s always centered and it doesn´t crop (a little at the bottom but not that much anyway). Here´s my humble and succinct code: (and here´s a fiddle too: https://jsfiddle.net/wvep5ga1/ )
html:
<div class="outer">
</div>
css:
.outer{
background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
background-size:cover;
background-origin:padding-box;
background-position:top center;
min-height:386px;
}
The problem I find is when I resize the browser window the div compresses to the point where it´s only visible the face of the man, as oppposed to what happens in the original page where you can always see the shoulders. I don´t know if i´m explaining this correctly, but basically on window resizing the height of the div varies much faster than what it does on the original page and that affects the rest of the page, beacuse the image of the man must always stay in the same place and must always have the same aspect ratio. I have the aspect ratio issue solved, but i´m having problems with the height of the div compressing and expanding too much on windows resize.
The original page was done using Drupal 7, I think. But what i want is a css snippet that does just that. I know it´s possible, i´ve tried everyhting for hours but i missing something. I know the original page uses many images with different resolutions but that´st no the issue.
Hope somebody can help. I look forward for your comments.
Thanks in advance!
See updated fiddle: https://jsfiddle.net/wvep5ga1/3/
just add
background-size: 100%;
background-repeat: no-repeat;
Like this:
.abc{
background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-origin: padding-box;
background-position:top center;
min-height:386px;
}
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'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.
So I am trying to use a background image in the bottom left of my page but I want it fixed and to resize with the browser window.
The only way I get close at all to reaching this goal is using 'background-size: 100%' However, that then makes the image TOO tall. So I'm not sure what to use to actually make it fit.
Any suggestions?
This is my current code...
body {
background-color:#000000;
background-image:url(Image.png);
background-position: 0% 100%;
background-attachment:fixed;
background-repeat:no-repeat;
background-size: 100%;
}
Well, background-size takes more than just one value. You could try something like this:
background-size: auto 100%;
However, for simplicity, first try:
background-size: cover;
This would make the width of the background automatically adjust to the aspect ratio of the 100% height. This guarantees that the background image will never be smaller or larger than the height, but the width is variable to the aspect ratio of their browser.
ADDENDUM
Also note that background-size is not supported in all browsers. If support for Internet Explorer is an issue for you, then I'd strongly suggest a Javascript fall-back. I'd also highly suggest reading the always lovely Chris Coyier's article on the "Perfect Full Page Background Image". It discusses fallbacks of all kinds!