I am having an issue with trying to make a fluid HTML page. (I wanted to take into account different sized resolutions, so I'm working with background images with widths of 1920px)
So I wanted to make a couple stacked divs, each with a background that gets resized via background-size. However, I'm noticing that I can't get 100% or contain to work as the property value unless I also manually set the height of the div. I can set it manually with a set px or %, but I feel like this isn't the best way to dynamically set the height of the div.
So I'm wondering if there's a better way to set the height of the div, so it's set to be the same height as the height of the image with the background-size property, so I don't get all the white space after the image, if the div is too tall.
I've got a live example here: https://jsfiddle.net/fcb1wcth/
#header {
background-image: url('http://i.imgur.com/x5wEY56.png');
background-repeat: no-repeat;
background-size: contain;
height: 710px;
color: #ffffff;
}
For example, this first div above... Since I'm working with a smaller screen, 710px is way too tall! The background-size does its job, I just don't know how to set the height correctly, and using a property value of auto doesn't help it.
// I've never used background-size before, so maybe I'm doing this wrong, but I wanted to try and experiment with making a page that works with any resolution.
Thanks for any help!
I think that better solution is to use a fixed height in combination with background-size: cover. Like this:
#header {
background-size: cover;
height: 400px;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/fcb1wcth/2/
in this example solve this issue.
http://www.jqueryscript.net/animation/Minimal-Full-Screen-Vertical-Slider-with-jQuery-Scroll-On-Scroll.html
Related
I'm working on a project where I have to give a background-image a full width. The image should become larger as I make the screen larger, and smaller as I make the screen smaller.
This is my code at the moment. It's a footer decoration:
.footerDeco {
background-image: url(../resources/image_geometry_2.svg);
background-repeat: no-repeat;
height: 160px;
background-size: cover;
}
The background-size: cover makes the image adapt to full width, but the height of the image remains 160px no matter what. If I make the height larger, then it's a problem because it doesn't shrink back proportionally as the screen becomes smaller.
I have tried giving it a height auto or a height 100% expecting the height to change proportionally to the width. (I do understand this height is the height of the footer container, but I don't know how to change it otherwise).
I know it would be much easier to use an img tag. But the demands of the project and good practice insist that since this is a decoration, I should use the background-image property. Is it possible? Thanks!
P.S.: There are similar questions that have been answered here, but none of them (as far as I can tell) solve the problem of the image resizing past the constant container height of 16px.
To make the height change proportionally to the width, you can use vw to specify the height, for example:
.rooterDeco {
height: 20vw;
}
maybe for a size of 100% it will work
background-size: 100% 100%;
using percentage makes the element one size relative to the size of the parent element.
You can use aspect-ratio.
.footerDeco {
aspect-ratio: 16 / 9;
background: url(https://www.fillmurray.com/g/300/200);
background-size: cover;
}
<div class="footerDeco"></div>
I have added a background image to my header and it looks great at smaller size but I lose the full image at larger size. here is the code I have so far
.fusion-top-header .fusion-header {
background-image: url("http://127.0.0.1/OTG/wp-content/uploads/2020/01/sunset_background.jpg")!important;
background-size: cover;
background-repeat: none;
background-position: center center;
}
I want all screen size to have the image look like what it is in the small screen one. I have the logo and menu moving and adjusting for screen size just not the image
Any help would be great.
Thanks
Problem is this:
When you enlarge your screen height of your element .fusion-header remains the same. Since background-size is cover your image is trying to be full width, hence automatically gaining height.
You have option to set background-size to contain and background-position center, or you have option to adjust your .fusion-header height via vw/vh units.
As far as I know I can' t say that there is anything else.
How can I display a cover image at the top of a web page that stretches when the width of the screen is bigger than the width of the image, but that retains a fixed height?
Here is a page with the behavior I am trying to emulate.
http://outsite.co/san-diego/
Here is the link to the page I am trying to apply it to.
http://phrasemates.com/xcode-developer-language-app.html
Thanks!
That would be an element with specified height, and a large background-image with background-position set to 50% or center, and background-size set to cover or auto 100% (for some older browsers).
div.wide{
height:500px;
background-image: url(path/to/big.jpg);
background-position: 50%;
background-size: cover;
}
to add to what Isaac Lubow said, i would also add an overflow rules in there so it would look like
div.wide {
height:500px;
background-image: url(path/to/big.jpg);
background-position: 50%;
background-size: cover;
overflow:hidden;
}
Adding overflow: hidden; will make sure that the image doesnt bleed anywhere. however it may not be necessary, just depends on your setup.
You could also set the width to 100vw and retain the set height of 500px. This would fill the width of the viewing window but retain your height.
Here are the full width banners which cause this issue. Im using a Plugin which enables you to upload a certain Image and set it up with a specific ID. So I Uploaded a jpeg with 2000px width and 600px height. Then I assigned the following CSS:
#bannerPages {
height: 296px;
margin-top: 183px;
width: 100%;
}
The banners look good on full screen, but they squish while down scaling the browser width. So I'd like to prevent the squishing effect and cutt the image while down scaling the browser size. How could I achieve this?
Looks like you have a media query that is making the width 140px !important.
Try changing the img on the media query to this
img {
width: 100%;
height: auto;
}
I played around with this for a while, but ultimately came up with two solutions depending on your needs. The first is easier to implement and more accurate to your requirements.
Remove the image from the bannerHome element and add the following code to the CSS.
.bannerHome {
background-image: url('http://www.gonpires.com/carmacks/wp-content/uploads/useful_banner_manager_banners/6-homeJV.jpg');
background-position: center center;
background-size: cover;
height: 890px
}
http://jsfiddle.net/9sqjs/2/
That method will only work in IE9+, Firefox Chrome, etc. Nice solution if you don't need IE8 support. You'll have to adjust your media queries as well. The other method requires more work and wouldn't crop the sides but it would fit and resize the image inside a 100% width container which would be cross-browser.
http://jsfiddle.net/Q64S2/1/
Have you tried making the image a background image instead?
For the .useful_banner_manager_banner classed div, you can set that large background-image so it'll essentially crop itself based on screen size.
I have a problem with my body selector. When I make my windows smaller it doesn't keep the body width at 100%, and I don't have any clue why.
body
{
margin:0px !important;
background:url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
}
This is generating a footer bug when I make the window smaller because the body is not on the whole width.
I can't add pics to show because I don't have 10 rep, but you can check at this link and make the windows smaller:
http://websoftit.ro/lackoflove/about.php?active=1
i dont want my website to be responsive i just want my body to be 100% on any resolution. here are the links of pics and problem i have when i make the window smaller: i.imgur.com/70sj43G.png i.imgur.com/OgMZVxa.png
You have widths set inside the body. For example your navigation has a width of 1060px as does your main_bg div.
The problem is actually caused by div#banner, which has the following style:
#banner {
position: absolute;
width: 150px;
margin-top: 5px;
margin-left: 1040px;
}
Margin set to 1040px together with width: 150px causes your banner to have overall width of 1190px, that is wider than the rest of site.
I assume you've used position: absolute on your banner to avoid this problem, but this is not enough to make it work like you want.
You can read more about solution to this issue here.
Note:
The above solves your problem, but won't help making your site responsive.
If responsive design is your goal (you didn't say this, I'm just guessing that maybe it is), I'd recommend looking at some tutorials to get the basic rules etc.
There also are responsive frameworks like Bootstrap or Zurb Foundation that help making responsive websites.
The child divs are not set to fluid widths. If you change the CSS "width" to "max-width" you'll get a chance to see how the layout changes at different screen widths. There will definitely be further updates needed to your CSS, but this will get you started.
document.onresize = function() {
document.body.style.width = document.body.scrollWidth+"px";
}
This can help you, when the document is resized, this callback reset body width to 100% of document's width.