My header is a picture, so I can't use percentages. it has to be of fixed width and height.
with that, when I resize the window and make it smaller, the content of the page fits to the correct size, but the header stays the same (of course) thus, it overflows beyond the page's borders and adds a scroll bar at the bottom.
Can I cut, or crop, the header so its height is always fixed, and the width corresponds automatically with the fixed height, but that the overflow of the header out of the page's border's is hidden?
I can use
body {
overflow-x:hidden;
}
but I fill that's cheating.
any ideas?
thanks!
I think this is what you're after... Make your header a div that fits 100% width x whatever height you require. Then set that div to have a background image and overflow: hidden;. That will always resize to fit your page width with no scroll bars.
div{
display: block;
position: relative;
width: 100%;
height: 200px; /* Set your height here */
overflow: hidden;
background: url(http://www.f-covers.com/cover/beach-fun-vintage-photography-facebook-cover-timeline-banner-for-fb.jpg) no-repeat center center;
}
This keeps the background image dimensions at the original size. If, however, you want the image to stretch to fit the div, add this to the css;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
Here's a working fiddle: http://jsfiddle.net/AWMQ6/
Enjoy!
Related
according to the window size, the picture should both cover the window and even if the window height is greater than the height of the picture, let the picture be centered and fully covered.
But I don't want like this (Because the image is not centered, it just starts from the corner.):
background-size: center cover;
Your attempt looks like you try to do it with a OneLiner.
body {
background: url(https://via.placeholder.com/500/green) transparent no-repeat center center / cover;
height: 100vh;
}
<body>
<div>
hello World
</div>
</body>
background-size sets the size of background images for the element. The size of the image can be constrained, completely or partially in order to maintain its aspect ratio.
then remove the margin and padding from the element's parent
try to separate each term, like this
background-size: cover;
background-position: center;
try using margins
I have defined a css for you
.image{
width: 40%;
height: 40vh;
margin-top:30vh;
margin-left: 30%;
}
u can change the width and height of image but remember change margin top and margin left by half.
I used this for a div with an image inside of it. should work just fine. it will get smaller/larger depending on the window size and it will be in the exact center of the page.
background-image: url(path/to/image);
background-size: cover;
background-position: center center;
I have a parallax class which contains the image as well. I tried to make the image responsive by setting the image width to 100%, but its just not working.
.parallax1 {
/* The image used */
background-image: url('Images/FloralPurple.png');
/* Full height and width */
height: 100%;
width:100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
and the following is the HTML code:-
<div style="height:230px;background-color:#001332;font-size:20px; color: #ffffff; padding: 18px">
Some text which defines the image</div>
I tried adding the image tag inside of my div, but still, nothing got changed.
Thank you
The size of your background image is defined by the background-size css property.
When set to cover the image will scale in order to fill the div. You can set the background size to the following values:
cover As described the div gets covered. The image gets scaled and cropped.
contain The image is always full completely visible and gets scaled in order to be completely visible.
100px 50px A fixed size. The image gets streched.
50% 100% A percentage. The image gets stretched.
Example:
background-size: 100%;
The image would always fill the div. But get stretched in order to do so.
I have a slider that displays a set if images with different dimensions. For some of them the width is much more bigger than the height, for some of them the height is much more bigger than the width and for some of them height and width are almost the same.
The images are displayed as a background of a li tag inside a ul list.
<ul class="gallery_container">
<li style="background:url(link1) no-repeat;"></li>
<li style="background:url(link2) no-repeat;"></li>
<li style="background:url(link3) no-repeat;"></li>
<li style="background:url(link4) no-repeat;"></li>
</ul>
With css
.gallery_container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.gallery_container li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background-position: center !important;
}
I want to display the images in a way such that
The background image is displayed in the center; ie. if the width or height of the background image is less than the ul's width or height, it must be in the center of the ul.
The background image does not go out of it's container; ie. the ul border. Even if the image's width or height is larger the containre's, the image must not go out of the ul's border.
The ratio between the height and width must be constant; any increasing in the height must come with increasing in width with the same ratio of the original dimensions.
If The background image's width is bigger than it's height, it's width must be 100%
If The background image's height is bigger than it's width, it's height must be 100%
Things I tried to do
To center the background image I used background-position: center !important;.
I tried to use background-size: cover; but it didn't work as I wanted, Images were scratched horizontally and vertically to 100%, and I want to save the ratio between the height and width.
I tried to set background-size: auto 100% but this does not solve the fourth requirement; if width is bigger than the height it's width won't be 100%, only it's height in all cases will be 100%.
I tried to set background-size: 100% auto but this does not solve the fifth requirement; if height is bigger than the width it's height won't be 100%, only it's width in all cases will be 100%.
My question
What should I modify to make the background image's width 100% when it's width is larger than the height and vice versa?
You're wanting to use background-size: contain Which will maximize the image to the largest side, and maintain aspect ratio.
background-size: contain
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
If its not the issue that if the user sees the background of the div or ul where image doesn't reach then you could go for background-size:contain;
This would save the aspect ratio of background image and you can center it by background-position:center and background-repeat:no-repeat
This shall solve your problem.
I am trying to create a full width parallax site and having an issue getting background images for sections to scale properly.
How would I get a full width image in desktop view to shrink down and contain a 100% width but the height shrink and image contain proportions to fit the width? The problem I am having is I can't set a background container to have a max height.
I'm really looking for a way for the height to shrink from 100% down when the viewport keeps getting smaller so that the focus of the picture isn't lost and maintains proportions just like a responsive image would.
I have tried background-size: contain as well but even then the container has to a have a fixed height which has to change while the background image shrinks because otherwise the image won't be fluid with the container.
#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}
If I remove the height obviously nothing is rendered in the browser and max-height doesn't work like it would for responsive images.
Can someone please help me with this effect?
You need to use background-size: contain instead of background-size: cover. Demo here
#main-photo {
background-image: url('images/main.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
}
I found a solution using a padding trick that adds height and allows the image to maintain its aspect ratio. Thank You!
Just add
padding-bottom: %here
You won't need to specify a height for the background image only a 100% width.
Here is a great article. http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
I want to stretch the background image to match the size of the screen
body {
margin-left: auto !important;
margin-right: auto !important;
width: 80%;
background-image: url(hola.jpg);
}
I try to put background-size: 1500px 1500px; and is fixed.
How I can do it and automatic for all pages resolutions?
background-size:cover;
background-position:50% 50%;
Not compatible with IE8 and lower, yours to decide whether you need to support those now that IE11 is already out.
Use this, it should even work if your <body> does not cover the whole window:
background-attachment: fixed;
background-size: 100%;
(Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
<percentage>
A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. [...] If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. [...]