I'm used to react native and trying my hand at reactjs, however I'm getting really frustrated with myself as I understand a lot of how react works from using react native but I can't style my components properly as I'm not used to css.
I'm using the ant design UI framework to help me build a small web application, and as of now I have my nav bar along the top of the app but want to set an image below that takes up 100% of the screen and have the height auto set to the aspect ratio.
I'm currently trying this but it doesn't work.
<div className="background">
</div>
//In App.css
.background {
background-image: url('./assets/main-image.jpg');
background-size: 'contain';
width: 100%;
height: auto;
}
I've tried the above but and a few other methods but nothing is working. It appears that the height is dependent upon whatever the content inside the div is. For example, if I place a h1 tag inside the div then I can see the image but only a few pixels in height.
My image is 4000px in width and is landscape. I just want to be able to dynamically display the image depending on screen resolution.
Can someone point me in the right direction?
Thanks
Edit: I've now set my css background class to this and it's nearly there.
background-image: url('./assets/main-image.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
The only issue is now I'm left with a decent size of padding below the image due to it rendering the full height of my view port
Try this:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
Related
This page centers and shrinks my logo to fit in the browser window. It uses a single PNG file and CSS flexbox with max-width/max-height. (View code)
This page animates the same logo. However, in order to limit the ripple effect to just the blue portion, some changes were needed (view code):
Logo split into two parts and stacked on top of each other (position:absolute).
Hard-coded the size of the logo. (No longer sized based on size of browser window)
I can't figure out two things:
How do I change the hard-coded sizes back to dynamic sizes based on the browser size? I also hard-coded the top and left, but if the two images are centered and scaled by the same ratio, they should line up properly without offsets.
How do I vertically/horizontally center the logo, again? I think my previous flexbox CSS doesn't work because the elements have position:absolute. Update: I was able to get centering to work again, but this involved more hard-coded width/heights.
I think I can do this via JavaScript, but is a pure CSS/HTML solution possible? (I have a feeling centering and dynamically sizing elements with position:absolute might not be possible). If JavaScript is disabled, the solution should gracefully degrade (the two parts of the logo are correctly aligned; the logo fits inside browser window).
Example: https://jsfiddle.net/2rdjfwhb/1/
It is possible to do both with CSS, you just need another wrapper element around the "logo" class. This wrapper element can be positioned naturally inside of a flexbox. After that it's just about calculating the ratio you need for your logo image and the ripple canvas.
.parent {
max-height: 100%;
max-width: 100%;
}
.logo {
width: 100%;
height: 100%;
position: relative; /* Parent handles centering this guy now */
}
.logo-ligature {
width: 100%;
height: 100%;
position: relative; /* Positioned for z-index */
pointer-events: none;
}
.logo-background {
background-image: url(https://cdn.glitch.com/b2cea96d-c2a3-486e-90d5-f60a651a36e3%2Fle_square_light_noborder.png?1553791477453);
background-size: contain;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
width: 75%;
height: 75%;
position: absolute;
top: 12.5%;
left: 12.5%;
}
I'm using an image with a height of 5000px, and i want make it always appear 100% in width and height to cover the background, in mobile and desktop.
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
background-size: cover;
width: 100%;
}
This code does not work, it makes her not to appear. I always need to set a height, and the problem is that the mobile's height is different from the desktop.
So you could say.. 'you can set height: 100%'.. and I did .. but nothing happens, the image doesn't appear, only if i set with pxs.
UPDATE
I feel urged to update my answer since I apparently understood the question the wrong way. I'll leave the old version at the bottom since apparently a lot of people found it helpful even though it failed to answer the original question.
Since your background image is repeating itself, I'll assume you don't want the whole image, just whatever height you need. So, you need 2 things:
set a height on .main
get rid of background-size altogether
So, this should actually work for you:
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
width: 100%;
height: 100%;
}
If my assumption is correct, there's 1 more thing: you don't need a background over 5000px high to achieve your goal, just reduce it to 1px height (i.e. 1 line of your desired background) and change your css to:
.main {
position: relative;
background: url('../images/background.png') repeat-y top center;
background-size: cover;
width: 100%;
}
I hope this helps
OLD VERSION
Your .main has no height and height:100%; doesn't work because the elements containing it have no height themselves.
One possible solution would be to add this:
html, body, .main {
height:100%;
}
This might be exactly what you need, but you may also run into other problems with this solution. It all depends on what you're actually trying to achieve.
Other possible solutions:
Use viewport units
.main {
height:100vh;
}
Please be aware that some mobile devices interpret these differently from what you'd expect.
Add the background to the body itself
body {
background: url('../images/background.png') no-repeat top center;
background-size: cover;
}
As I wrote before: It's difficult to tell which solution is the best, it depends on your goal.
Have you tried adding this style?
html, body{ height: 100%;}
Then adding a height:100%; to your .main div
You are working with background-image... Keep in mind that the size of the rendered image has nothing to do with the image it self, but with the element created to contain it.
Now, if you want your image to appear at 100% height and width you can use the property background-size: contain, instead of cover.
This will tell the browser that your image should not be cropped (as long as you have a height set for the .main element).
It seems to me, that the kind of effect you want is easier done if you just use the <img> tag instead of css background.
I had a issue about flex box can`t fit the background height, and the code below suited for me. The rest background-size,repeat and position depends on yours.
html{
height:auto;
}
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
How can I set a background image which is not scrolling along with the content. I'm using jquery mobile and phonegap. I try to use background-attachment: fixed but the image is not going in fullscreen.
<div data-role="page" class="background">
</div>
My css:
.background {
background-image: url(../images/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: 100% 100%;
}
I had to tackle this problem, the work around (as far as I am aware it hasn't changed in iOS7) is to create a separate div (call it the "background" div), set its position to fixed and insert your desired background image inside this div.
Set the z-index of this div so that it sits underneath the rest of your content.
iOS webview will respect fixed positioned divs but not background-attachment: fixed;
Set the background once, inside the <body> of your html file(s) but outside your subsequent pages.
Here's how I did it and it worked really well.
<div class="background"><img src="img/Background_Dark.png" width="100%"/></div>
and the css
.background {
position: fixed;
top: 0%;
left: 0%;
min-width: 100%;
z-index: -10000;
}
First, you need to cut out half of the CSS. Start with this:
.background {
background-image: url(../images/bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
}
Notice that I changed background-attachment: scroll; to background-attachment: fixed;. The default value of background-attachment is scroll, so you don't need to include it anyway, but that does the opposite of what you are trying to do.
Second, can you upload the bg.png to imgur or some other site so that we can have a better example of what you're trying to do? And also fill in your div with some sample content of similar length to your actual content? Since this is a div and not the body of your website, the div is collapsed unless there is content inside, and the div will grow to fill the content.
This means if you set background-size: 100% 100%; you will be stretching the image as far as the content of the div; which isn't what you want. You only want the background image to fill the viewport. Setting background-attachment: fixed; accomplishes this.
You can use iscroll plugin.
Page in jquery mobile executed by java script source code and in some of the elements changing in css not works.
EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/
I have a div that I want to have the following characteristics:
Width = 50% of its parent element
Height equal to whatever it needs to be in order to maintain a certain aspect ratio.
I need to use percentages because the object will resize left-right when the browser is resized. I want the object to be resized top-bottom to ensure the object maintains the same aspect ratio.
I don't think there's any way to use pure CSS to do this, but does anyone know of a way? Alternatively, is there an easy JavaScript way to do this? (JQuery is fine.)
I figured out how to do this without js, though you need to use a transparent image.
Set up a html structure like:
<div class="rect_container"><img class="rect_image" src="rect_image.png"/>
<div class="rect">Your favorite content here</div>
</div>
Use a AxB transparent png for rect_image where AxB is the aspect ratio.
Meanwhile set up a stylesheet like:
.rect_container {width: 50%; position: relative;}
.rect_image {width: 100%; display: block;}
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}
The important thing here is taking advantage of the fact that images maintain their aspect ratio when resized in one direction. Meanwhile, we need a useable div, so we make the image display as block, wrap it in a div, and put an absolutely positioned div inside that. I distilled this code from something more complicated I actually tested. Works like a charm.
Here's a pure CSS version with no img tag:
<div class="apple_container"><div class="apple_icon"></div></div>
SCSS (include Compass to render the background-size):
.apple_container {
width: 50%;
}
.apple_icon {
padding-bottom: 100%;
background-image: url(/images/apple.png);
background-repeat: no-repeat;
#include background-size(contain);
background-position: center center;
}
CSS generated from the above:
.apple_container {
width: 50%;
}
.apple_icon {
padding-bottom: 100%;
background-image: url(/images/apple.png);
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: center center;
}
Results in a square element with a background image centered and fitted within it. This is good for responsive elements that you want to resize dependent on the user's device.
jQuery sounds pretty easy. Set the 50% width in the CSS, and then the following:
function onResize() {
var el = $('#element');
el.height(el.width());
}
$(window).resize(onResize);
$(document).ready(onResize);
Here you go: Detecting a browser resize using JQuery.