I have a 600px tall header which uses backround image as its bg. When the screen is over 1600px, I use cover and the default is contain. Overlaying the header is one image(absolutely positioned) that is 500px tall.
When I resize the browser, the header doesn't keep its height, which can easily be seen by the overlaying image overlapping the header.
Here is the code:
/* ===== HEADER ==== */
header{
height: 600px;
min-height:600px;
width:100%;
min-width:100%;
background-image: url(../images/headerBG.jpg);
background-repeat: no-repeat;
background-size: contain;
}
#bgOverlay{
position: absolute;
top: 60px;
left: 30%;
}
/* ==== MEDIA QUERIES ==== */
#media only screen and (min-width:1600px){
header{background-size: cover;}
}
And the link to see it: http://www.madebym.net/test/crazysunsets/index.html
To resolve my problem, one needs to apply: background-size: 100% 600px;
This way the header is always 600px tall, and the image keeps its aspect ratio.
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;
}
If I am using background-size: cover; for a background image and that image is only 800px wide but the viewport is 1500px wide, how can I make it so that the image does not exceed its own width? (I don't want it stretched any larger than it's original size.)
header.hero {
position: relative;
clear: both;
overflow: hidden;
min-height: 390px;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
}
Add this css:
max-width: 800px;
But I don't want to add a CSS definition every time I use a different
image...
So you can try add CSS properties:
width: auto; - your image width will be scale to img height
max-width: 100%; - your image never will be wider than container wrapper
Since a little while we have the awesome background-size: cover and background-size: contain CSS properties.
What I'm looking for is a way to implement a combination of both. Lets call it the 'title-safe' area.
Basically in my background there is on each axis an area that is fine if it disappears/crops if the bounding box is not the appropriate size, but there's an inner area that absolutely must be visible, and we can use letterboxing to ensure this is true.
Some more info:
My background image has a 3:2 aspect ratio.
For example, this could be 300 x 200px.
Viewed on a 4:3 screen, this would become 266.66 x 200px
Viewed on a 16:9 screen, this becomes 300 x 168.75 px
The inner box inside both these 4:3 and 16:9 ratios is an area of 266.666 x 168.75 px. I want to make sure that if people watch the image on other/weirder aspect ratios that inner area remains visible at all times, and I'm calling this the 'title safe area'.
You can have 3 separate styles, and change them with media queries based on the aspect ratio
I have also changed the border color so that it's easy to know which style applies
html, body {
height: 100%;
}
.test {
width: 90%;
height: 90%;
border: solid 2px black;
margin: auto;
background: url(http://i.stack.imgur.com/ZmhEE.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: contain; /* changed by media queries */
}
#media screen and (min-aspect-ratio: 16/9) {
.test {
border: solid red 2px;
background-size: auto 120%;
}
}
#media screen and (max-aspect-ratio: 4/3) {
.test {
border: solid green 2px;
background-size: 120% auto;
}
}
<div class="test"></div>
I figured it out.
Take the following example for a html document:
<div class="container">
<div class="inner">
</div>
</div>
The inner css class will get a background-image that's always in the 3:2 aspect ratio.
The container has the following CSS rules. Note that the width and height are static here, but they can have any value, including percentages You can tweak them to ensure that the system works.
.container {
width: 900px;
height: 450px;
overflow: hidden;
}
Then the inner css needs the following rules to behave correctly:
.inner {
/* Set the background image. Must be 3:2 aspect ratio! */
background-image: url('background.jpg');
/* Fill up the container.*/
width: 100%;
height: 100%;
/* This is the default in any browser, but many people set it to
border-box these days for every element. It must be "content-box"
for this to work. The key thing here is that the width/height
cannot include the padding.
*/
box-sizing: content-box;
/* Normal CSS contain behavior */
background-size: contain;
background-repeat: no-repeat;
/* Always go to the center */
background-position: center center;
/* This will cause the background to extend beyond the content and
into the padding.
*/
background-clip: padding-box;
/* These numbers are just based on trial and error and not exact.
I tried to figure it out with Math, but my math was wrong. These
are fairly close approximations.
Effectively the width + the padding becomes the total 3:2 image
and the total image MINUS the padding = the title safe area.
*/
padding: 6% 8% 6% 8%;
/*
These margins ensure that the image is still centered.
The overflow:hidden on the container element make sure that
there's no scrollbars.
*/
margin-left: -8%;
margin-top: -6%;
}
More specifically, is it possible to scale a tiled background image using CSS3's transform:scale(x,y)?
While you can't use transform:scale(), if you know the final size of the background image that you need, you can you can use background-size to get the same effect.
.selector {
background-image: url(http://path/to/image.png);
background-size: 200px 100px;
}
However, if you always want to, say, "double" the width of the image that you use as a background, then that doesn't seem to be possible at this time.
EDIT: Note that while the background-size style supports % based parameters, it's not as a percentage of the image size, but the size of the window.
You can use :
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;
(or)
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
(or)
#bg {
position:fixed;
top:0;
left:0;
/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}
I'm not good in CSS. But just the idea: create background div with tiled background (using z-index) and scale it. It should work
Yes you can scale it but try using percentage.
background-size: 100%;
But you need to consider the different resolutions of a screen. 4:3 4:9 etc.
I would recommend you to use this jQuery script. jQuery Strech Background