So I have a background image that you can see on this image it is centered
But when I try to make it responsive this happens to the image
And I want it to not move and I've tried a lot of things like position: fixed or changing the margin but nothing happens and the image always does this.
Here's the CSS code:
body{
padding-left:14.12%;
padding-right:14.12%;
background-color:#000;
margin: 0;
background-image: url(images/principal.jpg);
background-position: top center;
background-repeat: no-repeat;
}
And here's the CSS code to make it responsive:
#media only screen and (max-width: 1024px) and (min-width: 321px){
body{
background-position: top center;
background-position-x: -42%;
}
}
You should put the image background in a DIV not in the body element, maybe in a header tag and set the height for the header.
HTML:
<body>
<header></header>
</body>
CSS:
header {
height: 100vh;
width: 100%;
background-image: url(images/principal.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
100vh means that the header will be always on screen size height resolution (mobile, desktop).
Also you can use #media and change the image on different resolutions.
Related
I'm setting up a site, and want to create a responsive background image but I'm getting only single line with background image. What property should i need to use to make the entire background image to fit?
I created 2 files,
index.html :
<div id="logo">Test</div>
style.css :
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
I tried many times but only single line gets background image. I want the background image to be fully displayed on screen without using height property which i think makes site less responsive.
you should change the height of logo div and set it as full height by adding height:100% for the body and logo div, your code should look like below code
html, body
{
height: 100%;
}
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height:100%;
}
If you want the image to have the same height as the screen you can use height:100vh. But if you want only the image full size you can do this like this :
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#image{
max-height: 100%;
max-width: 100%;
}
#text{
position: absolute;
color: white;
top: 0
}
<img id="image" src="https://images.unsplash.com/photo-1528920304568-7aa06b3dda8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
<div id="text">test</div>
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;
}
I'd like to have a background image on my homepage that is full width on desktop, but as the screen size shrinks, less and less of the right hand side of the image should disappear (but always shows the left hand edge and the objects in the left hand of the image).
The CSS code I have for this is as follows;
.sm-img-bg-fullscr {
background-position: 0% 0px;
background-size:auto;
width: 100%;
display: block;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
background-repeat: no-repeat;
}
and the html where this class is called is as follows;
<div class="sm-img-bg-fullscr parallax-section" style="background-image: url(assets/system/backgroundimage.jpg)" data-stellar-background-ratio="0.5">
I have tried adjusting the background-size variables, and the background position variable, but with no luck. The image being used is 1920 x 1080.
I would like to know what combination of CSS parameters will allow the full image to be shown when the screen width is large enough, and have it remove more and more of the right hand side of the image as the screen size is narrowed, making only the left hand side of the image visible.
Why don't you use media queries to adjust the image background on certain screen sizes?
All we are doing is adjusting the background-position.
body {
margin: 0; padding: 0}
*{
box-sizing:border-box}
.image {
width:100vw;
height:100vw;
background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/94/Cirrus_clouds_mar08.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size: cover
}
#media only screen and (min-width:1px) and (max-width:700px) {
.image {
background-position:left center;
}
}
<div class="image">
</div>
Di you tried this?
background-position: center;
Try this in your CSS
{background-size: auto;}
or try inline style using max-width: ??.px
I have an image background for a div that I want to show on different devices, The problem is that I have to give height of the image in order to fit it correctly. Now on different phones, I have to adjust the height with different px. forexample on iphones 65px works for portrait mode but not for landscape and etc. Is there a way that the div just gets resized in height to cover 100% of the background image?
here is my code
<style>
div.testing {
height: 95px;
background-image: url(/myimageurl);
background-repeat: no-repeat;
background-size: 100%;
}
#media screen and (max-width: 320px) {
/* iphone portrait */
div.testing {
height: 65px;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
/* iphone portrait */
div.testing {
height: 80px;
}
}
</style>
<div class="testing"> </div>
You could use background-size: cover;
.thing {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
but why are you using a background-image? if you can use a regular image, you could do it like this:
.thing {
width: 100%;
max-width: [your biggest width];
}
.thing img {
display: inline-block;
width: 100%;
height: auto;
}
ALSO
I would recommend flipping your mindset on the max-width and start small screen first, using min-width and getting bigger.
And you don't really need div.testing - it can just be .testing
And if you are using a background image for a good reason... you should investigate making the div -
.thing {
height: 0;
padding-bottom: 30%; /* play with this */
}
This will keep the proportions... but it's only useful in specific cases.
A complete jsfiddle with an actual image would be useful.
Good luck!
Nest your div inside the background div and set the height to 100%
<style>
.menu_bkg {
position: absolute;
top: 0px;
width: 100%;
height: 314px;
background-repeat: no-repeat;
background-position: center;
background-image: url(http://sphotos-a.xx.fbcdn.net/hphotos-ash3/578806_10151347589633079_1588853150_n.jpg
);
}
</style>
<div class="menu_bkg"></div>
the centering of the image works... but would like it to positioned at left:0px when the window veiw width becomes less than the width of the image; and not continue to scroll and cut off to the left the more the window is tightened. Is this even doable? any ideas. Thanks.
ps. i simplifed the code you so can copy and paste into any editor to quickly test.
Use CSS Media Queries -
#media screen and (min-width : 800px){
.menu_bkg {
background-position: 0px 0px;
)
}