I am a beginner trying to display a different header on a mobile screen. The header has a background image portrait of 4 people, which will be too narrow so people will be left out when viewing on mobile.
What I tried is setting the background size to 100%, but this means there is a gray space below the picture (which is now fully visible) on mobile.
smallheader {
background: url(../image.jpg);
background-repeat: no-repeat;
background-position: center 70px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
height: 500px;
z-index: 0;
border-bottom: 15px solid #139cb0;
Decreasing the height to 300px on a mobile screen would work. How can I edit the code, or add a new class so that I can edit this height for mobile screens?
#media only screen and (max-width: 430px){
smallheader {
background: url(../image.jpg);
background-repeat: no-repeat;
background-position: center 70px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
height: 500px;
z-index: 0;
border-bottom: 15px solid #139cb0;
}
}
use media query like this
Related
I am trying to make a background image of a div cover the screen on both desktop and mobile devices. It is working perfectly on desktop, but no matter what I try, the image appears zoomed in on mobile.
This is the page: https://www.smithbars.com/tappd/
This is the CSS for < div class="section1" >
/*desktop*/
#media only screen and (min-width: 800px) {
.section1 {
width: 100%;
margin: 0 auto;
text-align: center;
background-image: url(TAPPD1_.jpg);
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #000;
padding-bottom: 2em;
}
}
/*mobile*/
#media only screen and (max-width: 800px) {
.section1 {
width: 100%;
margin: 0 auto;
text-align: center;
background: url(TAPPD1_.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom: 2em;
}
}
Thanks so much for any help!
This is happening because you are trying to use background-size: cover which maintains the aspect ratio of the image.
cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
Change:
background-size: cover;
to:
background-size:100% 100%;
The image loses its aspect ratio but you get your wish.
I am editing a websites original theme, and have presently run into an image that is cropped vertically inside a div
See codepen or example below: https://codepen.io/hioioasd90/pen/LzvmpW
I would like for this image to display in its entirety, but be scaled to the outside containers set width.
After editing the chrome console, changing height: 27vh; to a larger number will result in the image showing more inside the div, however it beings to go beyond the boundaries of the max width.
.container {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.img-cover-category {
background: none no-repeat center center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
}
<div class="container">
<div class="img-cover-category" style="background-image: url(https://writernikhilpro01.files.wordpress.com/2015/08/unsplash-laptop-desk.jpg);"></div>
</div>
Depending what you would like to achieve, first you could delete doubled:
background-size: cover; // this is doubled in the css code
and add:
background-size: contain; // new version for every browser
And from this point try to adjust the size of the image.
Here is what you can delete:
.img-cover-category {
background: none no-repeat center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
}
And paste this instead:
.img-cover-category {
background: none no-repeat center;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
margin-bottom: 0px;
}
Then if the scaling should leave the image fixed to the top and not center in the middle you can change this:
background: none no-repeat top;
ADJUSTMENT TO NEW SITUATION vesrion A
Instead of adjusting height of the image set a height of the container
.container {
max-width: 1000px;
height: 1000px;
margin: 0 auto;
position: relative;
border: 1px;
border-color: #000;
border-width: 1px;
border-style: solid;
}
.img-cover-category {
background: none no-repeat top;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
position: relative;
z-index: 0;
padding: 0;
height: 100%;
width: 100%; /* Currently this seems to be obsolete */
margin-bottom: 0px;
}
Also adding min-height: lets say 1000px to the .img-cover-category seems make the background visible aswell...
To be honest I don't know what this will be a header, a background - maybe you could add a normal image instead of background.... if you want it to be visible all the time...
This image is too big, I want it to fit the size of the window: http://zgaming.comxa.com
but I do not understand how, I also tried height and width 100%
html
<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></img></div>
css
.bgimg {
position: absolute;
top: 0;
left: 0;
z-index:-99;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I also tried this
.bgimg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:-99;
}
.imgbg {
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This answer
https://stackoverflow.com/a/43612299/7874902
works but on mobile there is some white space at the bottom..
You should set
background-image: url("http://zgaming.comxa.com/dist/img/bg.jpg");
and try with
background size: contain;
as with cover it's possible it cuts a part of the image.
check this:
w3schools.com/cssref/css3_pr_background-size.asp
Hope this code spinet help you.
.bgimg {
width: 100%;
margin: 0;
padding: 0;
}
.bgimg img {
position: absolute;
top: 0;
left: 0;
z-index: -99;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></div>
This solution is purely meant to only show how to try and fill the viewport with a single image, no extras.
We use min-height: 100vh to tell the body tag to be as tall as the viewport. we use background-size: cover to center the image an have it fill all of the body element, cropping if necessary but maintaining aspect ratio.
body {
margin: 0;
height: 100vh;
background-image: url( 'http://zgaming.comxa.com/dist/img/bg.jpg' );
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
There's one major thing you have to realize with trying to fill a viewport, especially viewports with varying aspect ratios; you'll either have to crop part of the image at some point or distort it. Below we chose to crop it over distorting it.
You can't use background-size: cover on a img tag.
Just try to make background-image with yours and make div size at 100% on width and height.
You can make this rule directly on body :
body {
background: url(./path_to_your_image) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background: url('http://zgaming.comxa.com/dist/img/bg.jpg') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
margin: 0;
}
html{
height: 100%
}
I have a banner div:
<div class="background" style="background: url(<%= #banner.image.url(:big) %>) no-repeat"></div>
and corresponding css:
#banner {
width: 100%;
height: 275px;
}
#banner .background {
width: 100%;
height: 275px;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
uploader.rb:
version :big do
process resize_to_fill: [1920, 280]
end
On smaller devices, the background-image is cropped, here are the screenshots. Full width:
And a resized window:
Is there any way to make the image be resizable when the screen width becomes narrow? Thanks.
Just use background-size: contain for this
#banner .background {
background-size: contain;
}
try background-size: 100% auto;
My background image is cutting off my text when the screen size is adjusted smaller. The background image is also not 100% of the screen height when viewed in large screens. What am I doing wrong?
.slider {
background: url("../images/bg2.jpg") no-repeat center center fixed;
background-size: cover;
max-height: 1200px;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Add min-height:100% for .slider class and add height: 100% for their parent body tag.
Remove width, overflow, height in .slider class.
Should be -
body {
height: 100%;
}
.slider {
background: url("../images/bg2.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}