I have a react app with router. I also have a navbar.
I want my main page to have a background image that fills the entire page:
html, body {
height: 100%;
}
.Main .bg {
width: 100%;
height: 100%;
background-image: url("../resources/top-bg6.jpeg");
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
However, this causes the image to be cropped at height 56px.
I think the cause is all the encapsulating divs that are caused by the different components and the router.
If I try
.Main .bg {
...
height: 100vh;
...
}
A scroll bar appears. I do I deal with it?
Edit: Added a screenshot:
It's all is great but a little bit you have change in your code.
Apply 100vh height on your .Main div only and change .bg background-position = center.
Now your image come at centre of your background .it's depend on your image size.
Related
I am using Gatsby and I am trying to edit my CSS to give myself a background image that fills the screen then below that I just want a footer. This does not have the footer but it is a great example of what I am going for.
I have
body, html, #gatsby-focus-wrapper, #__gatsby {
height: 100%;
}
.landingDiv {
background-image: url("https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
However, the background does not extend to 100%. I have tried setting parent containers to 100% in order to get this background to expand. This is what it looks like now.
Here is an image showing the width of the
Here is a Code Pen of this code - https://codepen.io/norogoth/pen/zYwNqWX (updated 3:30pm)
If you want to use it as a background image, you need to make it's container wider and higher to adapt it to the maximum with and height of the screen. Using relative units may work for you. Something like:
.landingDiv {
background-image: url("https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* making it 100% of the total width and height */
height: 100vh;
width: 100vw;
}
vh and vw stand for viewport height and viewport width respectively.
Object-fit: cover instead of background-size: cover;
As the title says, the issue arises only when viewed on mobile.
On my pc it looks exactly as desired but when I open it up on a mobile device there is a blank space between the background image and the footer?
Site is live #
https://claritysalonspa.com
Any help would be appreciated!
I am not sure how you are adding the background image in the backend, but try adding the following style. In here, .page-id-29 is the class added to the current page, and you added a background image to it.
.page-id-29 {
background-image: url(YOUR-IMAGE);
background-size: cover;
background-repeat: no-repeat;
height: 100vh; // add the height
background-position: 50% 50%; // center the image
}
so the solution is to add height: 100vh and also change the image position so it is centered.
Add this in your style.css
#media screen and (max-width:600px){
.page-id-29{height: 95vh;}
}
It's because your bodydoesn't have enough content. If you add more content then there is no trick needed.
You can overcome this by adding min-height to your body tag.
.page-id-29 {
background-image: url(https://claritysalonspa.com/wp-content/uploads/2018/03/IMG_5215.jpg);
background-size: cover;
background-repeat: no-repeat;
min-height: 92vh; /* this for height */
background-position: center center; /* to center the image */
}
If you want to make your footer always bottom of the viewport please add thi also.
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
padding: 0 !important;
}
The Fiddle isnt rendering the exact grid properly but it gives you an idea of what I'm going for. Each div has a fixed background image. The problem is each background image is defaulting to the top left corner, even after trying to reposition the image using background-position.
https://jsfiddle.net/hLu7gvo3/
The styling looks like this
#thumb1{
background-size: cover;
background-position: center;
background: url("../img/gal1.png");
background-attachment: fixed;
background-repeat: no-repeat;
}
.gallerythumb {
color: white;
position: static;
float: left;
width: 33.333vw;
height: 100vh;
}
and the html as you'd imagine
<div class="gallerythumb" id="thumb2">1</div>
I tried setting the sizing property as container but that didn't do much. Anyone have any clue how to center the background image within the div?
Using web responsive design I want to put a big image as background on the frontpage, which always stays 100% width and height. Very similar to https://ghost.org
Here is how I'm trying to do it:
http://jsfiddle.net/Jp5AQ/1144/
div img {
max-width: 100%;
min-height: 100%;
height: auto;
outline: solid 1px red;
}
But it doesn't work correctly. The image is disturbed by resizing the window.
If you want to do this with pure CSS you can use the CSS3 background-size property:
div {
width: 100%;
height: 100%;
background: url(your-image.jpg) no-repeat center center;
background-size: cover;
}
Here is a fiddle demonstration:
http://jsfiddle.net/Jp5AQ/1149/
This is the same technique used on the Ghost site you gave as a reference.
Note that I've given the html and body elements height:100% so that the div stretches to fill the height of the viewport.
You are using <img /> tag.
Call the image through CSS and use background-size: cover;.
Here is the DEMO
Your image will always be the max-width of the browser window; however, the height will not stay at 100% of the browser window because the image on the screen needs to stay in proportion with the original image. As the width of the browser window shrinks, so will the height.Otherwise your image would be skewed.
You can use the property background: cover.
The post maybe be helpful http://css-tricks.com/perfect-full-page-background-image/.
Its hard to do that with an img tag.
it will work a lot better with:
background-size: cover;
background-position: center;
here is a Fiddle of it
just remove the image inserted with an image tag and instead put the image in a div as background.
div: should get height and width of window screen size (most likely with javascript)
insert image with the css style:
div{
background: url(path_to_img/img.jpeg) center center no-repeat;
background-size: contain; // you also can use cover, just look how you wish the picture should be cut or not. for background-size you also need some prefix for some browsers
}
here is the link for css background: http://www.w3schools.com/cssref/css3_pr_background.asp
and here is the link for background-size : http://www.w3schools.com/cssref/css3_pr_background-size.asp
try this css:
.banner-bg {
background-image: url(../images/header-bannerbg.png);
background-position: fixed;
background-repeat: no-repeat;
height: 580px;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
http://jsfiddle.net/aashi/Jp5AQ/1146/
Firefox has a curious bug relating to background-attachment and background-size. I call it a bug, I suspect it isn't, but this renders the way I think it should in the other major browsers (emphasis on I think). The desired effect is to size a vertically repeating background to 100% width while maintaining image proportion.
Here's my original CSS, in this version, the background won't render at all for firefox (even with firefox specific background tags).
body {
background: #000 url('../background.jpg') left top repeat-y;
background-attachment: scroll;
background-size: 100% auto;
}
Changing background-attachment: scroll; to background-attachment: fixed; causes the background to render, but the "floating background" behavior is not desired.
[UPDATE]
Removing background position causes the image to render correctly again.
e.g.
body {
background: #000 url('../background.jpg') repeat-y;
background-size: 100% auto;
}
This is actually a problematic fix because my position values were actually 'left 113px'. I can fix this by applying the background to a wrapping div below the site header instead of the body element, but the fact remains that Firefox has trouble rendering background images with background-size: 100% auto; when position values are used and attachment is scroll.
[UPDATE 2]
I realize the bug only shows up when an additional piece of CSS is present. That's not to say the additional piece of CSS was at fault (it isn't), it's to say that this Firefox specific rendering bug is somehow caused by it.
The additional CSS (used for creating layouts with flexible 100% height)
html { width: 100%; height: 100%; position: absolute; }
And the complete body CSS to go with to replicate the bug
body {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
background: #000 url('image.jpg') top left repeat-y;
background-size: 100% auto;
}
[SOLUTION]
I solved my problem by creating an additional wrapped div immediately within the body and attaching the background there without specifying position properties.
#wrapper {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') repeat-y;
background-size: 100% auto;
}
But because I now have an additional wrapper anyway, I can go ahead and remove the position, height, and width attributes from html, rendering the bug moot and allowing me to set the position of the background as well.
I solved my problem by creating an additional wrapped div immediately within the body and attaching the background there without specifying position properties.
#wrapper {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') repeat-y;
background-size: 100% auto;
}
But because I now have an additional wrapper anyway, I can go ahead and remove the position, height, and width attributes from html, rendering the bug moot and allowing me to set the position of the background as well. (see UPDATE 2 in my original question)