I have a background image that is taller than my page, but I set it as the background for my wrapper. This has been pretty problematic for me, however. When I try to resize the window, there is a large amount of white space under the background image. This is because I have a set height for my wrapper,
.wrapper{
top: 65px;
background-image: url(img/iasite.png);
background-repeat:no-repeat;
background-size: 100%;
width:100%;
height:7250px;
}
If I try changing the height to 100%, there is no background image at all and the page is blank(there is no other content in my wrapper at this point). If I do not set a height, the same happens. When I do put content in and set the height to 100%, the background image only goes up until a certain point before the rest is cropped, and there will still be elements hanging outside of the image.I think I could resolve this problem if I could somehow set my wrapper height to the height of my background image so that when it is resized, the webpage would read the background Image height and readjust the wrapper as so. Is there a way to do this, or is there another way to solve my problem? Any help is appreciated.
Did you try
background-size : cover
Related
When I place a background image in my div to create a background for it a scrollbar horizontally for the whole webpage. I think it is because my background-size: cover; made the background image grow to its original size but I want the image to scale down exactly to fit all devices.
Codepen: https://codepen.io/Javscript/pen/WNXmRMp?editors=1100
The scrollbar has nothing to do with the background image, not even with the element which has the background image. (Btw., a background image can never affect box sizing.)
The .main-con element has a width of 100% and a margin of 160px. The 100% does not refer to the remaining space; it refers to the width of the parent element, in this case the body.
So the .main-con element is as big as the body/screen, but has a 160px distance from the left side, resulting in it overflowing 160px on the right side.
One way to counteract this without completly reimplementing your website would be to set the width of the .main-con element to calc(100% - 160px).
Try to use this property:
background-size: contain;
background-repeat: no-repeat;;
The difference between the values cover and contain is that:
1- cover: makes the background covers the whole div
2- size: makes the background fits inside the div
You gave your background Image a size of 100%. But you have allso ur Sidebar. So the Image itself cant take all 100% of the screen. Try using
calc(100% - 160px)
for the with of the .main-con
I am trying to make an image fit the browser window in relation to its height and respond dynamically to window size.
I need the image aspect ratio to stay the same but the image can be ,larger than its originally resolution if viewed on large screens.
I don't want the image to spill outside of the screen and create a scolling effect.
The image must stay centered inside is container both vertically and horizontally.
Here is an example of what I am trying to achieve.
It is not clear what you tried so far and we don't see any code. I'll try to answer anyway and perhaps it'll help you.
First of all, when you working with responsive layouts, always try to size your elements with viewport height and width. This helps you keep your content relative to the browser size - no matter if resized nor how large the screen is.
This code might help you insert a responsive image to your site:
div {
width:80vw;
height:80vh;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}
Working example here
In this example is div sized 80% of both window's height and width, so it never exceeds the viewport. Max. measures of img are 100% of the div and height:auto; secures that it preserves its aspect ratio. Image then fits a div to the max allowed. You can comfortably center the image by setting display:table-cell; vertical-align:middle; text-align:center; to the DIV.
Another solution would be:
background-image:url(' ');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
Check it out here
Using the object-fit CSS property, you can do it without a container:
img {
height: 100vh;
width: 100%;
object-fit: contain;
}
See the browser support.
To do something like your exemple, you can use background-size:cover.
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off
Also see this plunker : https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview
Hi i want an always fit sceen background image and my index page contains 2 div and each of them got specific background image. Combining these 2 div background ima, i will got a full picture (each div bg img got 1/2 of that picture). The problem is the picture aspect ratio is 3:2 (1200x800 resolution) but background-image: cover CSS is auto scale both width and height so if i got different aspect ratio (such as 16:9, 4:3...), the full picture that combined from 2 divs are not right (wrong height from each div bg img). Is there any way to solve this problem?
cover is not the only option for background-size. It sounds like you should be doing something like:
background-size:auto 100%;
Which will set the background images to 100% height, but auto detect the width. Note that you aren't confined to percentages either:
background-size:auto 500px;
background-size:auto 31.25em;
will also work.
MDN has a solid reference for all the options available.
I have an image that I need to put divs on top of for links. I did this fine when I initially created the website, but now I am tasked with making it responsive, so I can no longer use -top and left values to position the overlay divs because they don't move with the image.
Trying to put the image as a background image so that the position of the overlays can be set and contained within the parent container.
I have tried using the background size property (cover, contain, 100%), but they will not make the div show all 400px of its height.
setting a max height, using auto, or 100% do not work either.
I would use min-height, but then the div would not scale down on mobile devices.
Does anyone know how I can get my parent div to be the full size of the background image?
One recommendation is to position the links using top and left percentages, ie:
#link1 {
position: relative;
top:2%;
left:2%;
}
I want to resize images when the browser is resized but I would like to keep a border of 30px on both the left and bottom of the image when doing so. Like this: http://www.jennyvansommers.com/non-commissioned/corner/#347
Is there a simple way to do this using CSS?
Thanks in advance
I would try putting the image inside of a container, the container having 100% width and height, with padding on the left and bottom of 30px, and the image inside it also having 100% width and height.
EG
<div id="imageWrapper">
<img src="imageurl" />
</div>
<style>
#imageWrapper{width:100%;height:100%;padding:0 0 30px 30px}
#imageWrapper img{width:100%;height:100%;}
</style>
The wrapper should fill the window, and the image should fill the wrapper out to the padding. This will most likely stretch your images though if the shape of the image differs to the shape of the window. If you want to keep the aspect ratio of the image try just setting the width or the height of the img, but not both.
Hope this helps :)
EDIT:
Not sure if you want to fill the screen, play with img{max-width:100% and img{max-height:100% instead of width and height if you want the image to retain it's natural size unless the window is smaller than it..
I would expect setting a min-width and min-height of 30px, with a relative width and hiehgt of 50% or whatever relative size you would like would achieve this sort of effect
.image-resize {
min-hieght:30px;
min-width:30px;
height:50%;
width:50%;
}
Sorry misread your question there, a border? or a margin? so somthing like
margin-left:30px;
margin-bottom:30px;
instead of the height and width, you could use border-left and border-bottom i suppose using a transparent border, but i perfer margin.
But relative sizing i think is what you want? so it resizes with the browser, or actually resizes relative to its parent so depends where it exists in the dom