I was looking for a solution to make my opening background image to be 100% of the viewport and after using Josh powel''s answer here Page height to 100% of viewport? it works on chrome on mac but not on any other browser (on mac or windows) When I say 'it works on chrome on mac', it works in most instances however if I stretch the browser too high, it doesn't fit to cover and I see my next bit of content so it's like it only works for heights up to x...
here's my code:
<section class="intro">
<div class="intro-body">
</div>
</section>
.intro {
display: table;
width: 100%;
height: 100%;
padding: 350px 0 330px;
text-align: center;
color: #fff;
position: relative;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size:cover;
}
.intro-page {
padding: 150px 0 130px;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size: cover;
}
function windowH() {
var wH = $(window).height();
$('.intro, .intro-page').css({height: wH});
}
Fiddle here http://jsfiddle.net/9h98f/1/
If anyone can shed any light, that'd be great.
In order to make an element 100% height of the page, you must also have:
html,body { height: 100%; min-height: 100%; }
It's much better and more reliably to do this in CSS than by using JS.
Alternatively, you could just put the background image on the body (with background-size: cover like you are using).
Related
I'm trying to replicate the way these images change on this website when you shrink the screen https://sweetbasilvail.com/
I went ahead and added the css I saw from their site, but it still is just shrinking my image on mobile instead of doing of this site is doing
.hero {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #211f1f;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-position: center;
}
So I have this image that I want to be the background for my entire home screen, but if I use this code below and shrink it to mobile, it basically squishes the image.
img {
width: 100vw;
height: 100vw;
}
And on mobile it ends up looking like this
If I use the regular responsive css, it shrinks the image and ends up leaving a huge white space below
img {
width: 100%;
height: auto;
}
So I'm not sure how to display an image as the entire background without sacrificing the quality of the image or distorting the way it looks. Is it normal to just have the image shrink on mobile? or is there a proper way when using a full image background?
Note the 2nd image with the giant white space is what the original image is supposed to look like at 100% width;
Use background-size: cover
#bgimg{
height: 100vh;
width: 100vw;
background-image: url(https://placekitten.com/1000/500);
background-size:cover;
background-position: center;
}
<div id='bgimg'></div>
You want to keep the proportions, so you use width: 100% on a div and change its background image. This is much easier to manipulate than an HTML img tag.
Quick code snippet on CodePen (https://codepen.io/ma-henderson/pen/eYzGwJe?editors=1100)
<div class="container">
<header class="header">
<nav class="header__nav-item">Our Menu</nav>
<nav class="header__nav-item">Our Concept</nav>
<nav class="header__nav-item">Locations</nav>
</header>
<div class="hero"></div>
<footer class="footer">
<nav class="footer__nav-item">Gallery</nav>
<nav class="footer__nav-item">Special Events</nav>
<nav class="footer__nav-item">Catering</nav>
</footer>
</div>
.container {
posiiton: relative;
}
.header{
position: absolute;
top: 0;
left: 0;
width: 100vw;
padding: 1rem 0;
z-index: 3;
color: white;
background: rgba(0,0,0,.3);
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.hero{
background-image: url("https://images.unsplash.com/photo-1572116469696-31de0f17cc34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80");
/* I've added the below line to keep it always centered regardless of viewport width, change it to your liking, you can google "background-position w3 schools" for more info */
background-position: 50% 50%;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem 0;
z-index: 3;
color: white;
background: rgba(0,0,0,.3);
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
You have two options, depending on exactly what your use case is.
If you'd like the img to fill the entire screen but without distortion you can use object-fit: cover. Of course, with this if the image is very wide compared to height you will get some bits cropped from the left and right in portrait mode, and conversely top and bottom in landscape mode - but in either case the screen will be covered.
If it's important that the user sees the whole of your image regardless of its aspect ratio in relation to the viewport aspect ratio then use object-fit: contain. This will result in some space either to the sides or the top and bottom of the image depending on how its aspect ratio compares to the viewport's.
object-fit is quite widely available on browsers, but not on any version of IE.
Note: for background-image as opposed to img use background-size: cover or contain.
Doing that is not really ruining the quality, it's stretching it because that is what you are telling it to. The second option is normal, you just want to probably fill it up with content below so that its not white space. But that doesn't fill up the entire screen.
You probably want to use a media query so that the browser detects when the user is on mobile, then you can crop the sides of your image to make it fit without stretching it, either manually using something like Photoshop, or with CSS, which is answered here on how to do it: How to automatically crop and center an image
I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
There's a similar question here about this: scale div to background image size but it didn't solve my problem either.
I'd really appreciate if someone knows how to do it.
EDIT:
I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/
This line is what is making the background image so small:
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
div figure{
padding-top: 36.56%; /* 702px/1920px = 0.3656 */
display: block;
background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
background-size: cover;
}
<div>
<figure></figure>
</div>
you can have a responsive height using the padding-bottom or padding-top
because you can't fix an height property in '%' with a width in '%'.
div{
background-image: url(url);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 auto;
width: 100%;
padding-bottom: heightPicure / widthPicture + %; //do it manually or using scss rules
}
I am having trouble with centering a background behind a div. I have made a fiddle showing how the background image stays center whilst the browser window is resized, which is great, but if the scrollbar is moved down so to view the bottom of the green div, the back ground follows the scroll, so is no long centered, which I am trying to avoid. I hope for the center text of the bk-gnd image to remain central in the view port at all times, whether resizing the screen or scrolling, is this possible?
here is the interactive fiddle : http://jsfiddle.net/4fM2n/
CSS
html, body {
height: 100%;
margin: auto;
}
#bk-gnd-div {
height: 100%;
background-image: url('http://oi58.tinypic.com/5an82h.jpg');
margin: auto;
background-repeat: no-repeat;
background-position: center center;
background-color: #9FBBE2;
}
the other div code is on the fiddle, stackoverflow is saying it is not formatted correctly and wont let me post it? maybe this is a clue?
add css
*{
margin: 0;
padding: 0;
}
#bk-gnd-div {
margin: 0 auto;
width: 100%;
}
or image fixed center
body {
width: 100%;
height: 100%;
background-image:url('http://oi58.tinypic.com/5an82h.jpg');
margin:0 auto;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
I've got this logo I'm trying to use on a responsive site, but I can't figure out how to have it so it fills the full width of its parent element while maintaining its ratio in height.
When you start resizing the browser window, the logo gets smaller in width but its height doesn't scale properly. Is there a way to maintain this.
Here's my CSS for the logo element:
h1 {
width: 100%;
height: auto;
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
margin-top: 270px;
}
This is the problem I'm having. Look at all that extra space below the
logo.
And here's a CodePen with an example of my issue:
http://codepen.io/realph/pen/LAFsi
Any help with this is appreciated. Thanks in advance!
You could use a padding trick (see CSS-square container) to do what you want with one image
h1 {
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
position:relative;
width:100%;
height: 0;
padding-bottom: 30%;
display:block;
}
Demo
I've asked this question before and got a solution but as I work my way into it, I found out that the solution wasn't the best (the suggestion was to set both into display:table-cell)
As I add in divs within, the height changes and the layout gets out of hand.
what I want is really simple, something like the image shown
[EDIT : this is the main reason why i'm having problem, i'm trying to add a div to include a shadow ]
I want the textured BG to stretch all the way, as tall as how the page would be (so as the content varies the textured bg would follow)
So I made something such as
<body>
<div id="page">
<div id="sidecolumn">
<div id="sidebar"></div>
</div>
<div id="maincolumn">
<div id="content"></div>
</div>
</div>
</body>
by setting all the divs and body style to have height:100%; but the problem is that as my content stretches beyond the page limits (a scroll bar appears) the textured BG doesn't flow over, it just stop at where it was. Say the screen is of 800px tall, if the content goes beyond and reaches 1000px, the textured bg stops at 800px.
As I tried what was recommended for me by using display:table-cell, the textured bg flows with the content, but I can't add in my side bar because when I do, there will be a blank space above the content div. Any suggestion on how I should handle this problem?
EDIT: Using Xun Yang's approach would work. It's just, as he put it himself, unconventional ;)
The fiddle: http://jsfiddle.net/Nu2wH/
html, body {
height: 100%:
padding: 0;
margin: 0;
}
#page {
background: #444444;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/3e/Social_icons-google-22x22.png?uselang=de") repeat;
}
#sidecolumn {
width: 45%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
float: left;
}
#sidebar {
background: #ddd;
}
#maincolumn {
padding: 5%;
width: 40%;
float: right;
background: #AA9933;
height: 100%:
}
#content {
background: #ddd;
}
You Can Use the css 3 declaration background-size, for all browsers
background: url(images/bg.jpg) no-repeat center center fixed; //fallback for unsupported browsers and sets the background image
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}
Not very conventional but works :)