I'm running into a strange issue where declaring the background-size to be a certain px value makes my background disappear entirely on mobile (Specifically on the pixel 2 xl, have tried it on a pixel 2 and it works).
Below is the code I am using to declare my background
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(photos/2452.jpg) repeat center center;
background-size: 550px 350px;
-webkit-background-size: 550px 350px;;
-moz-background-size: 550px 350px;;
-o-background-size: 550px 350px;;
background-size: 550px 350px;;
}
If I switch background-size to cover it correctly works, however, I want the background to be repeated so having one picture cover the entire page does not really work here.
I ended up downscaling the picture to 550 x 350, not the optimal solution but it worked for me
Related
I have a Django project and I want to add a background image to the HTML template. I have the following code:
<body class="standard-background-color standard-font-family" background="{% static '/images/background1.jpg' %}">
It displays the original size which is 5300 X 3100 or something like that. I want to change the image size for the background image but when I apply css to the body tag the images size is not changing. How can I change the image size to 1920 x 1080...
As Radiant Ahmed pointed out in his comment, if you want a background with opacity then it should be another div
With that in mind, you can use a pseudo element to create the background image container.
Also there is no need to resize the actual image in Photoshop to fit the screen (though it's kinda huge), use background-size: cover instead.
How background-size property works MDN
div {
width: 200px;
height: 200px;
background: red;
}
body::after {
content: '';
background: url('https://fillmurray.com/500/500');
background-size: cover;
opacity: 0.5;
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div>
<p>Yo! I'm the content!<p>
</div>
Correct me if I'm wrong, but I'm assuming that you are trying to set the size for the background image for html which is unaffected by the CSS for body.
In that case, just add !important after what briancaffey said so that it doesn't get overridden by other CSS:
html {
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-position: center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
It's not recommendable to set a background size of 1920x1080, because people have different viewport sizes, so it's more practical to adjust the size to their viewport using background-size: cover.
I really don't know why this is happening, I guess I'm tired, but the question is that the "background-size" doesn't work on my mobile devices, just when I tried to simulate on the browsers that I used in my PC.
Take a look:
PC looks like these: Image
Mobile... Image
Ah! The codes:
#media screen and (max-width: 888px) {
body{background: url(../img/bgm.jpg) fixed no-repeat; background-size: cover;}
}
Thanks
Give this a whirl, just add it in your /head/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
credit: https://www.w3schools.com/css/css_rwd_viewport.asp
If this doesn't fix it, it could be your background-position size if you have a div with a background image try contain as opposed to cover on the mobile version, or just upload the image that has the appropriate size, for ex: if the header is 300px wide by 150px height just resize the image to that
Finally worked!
After a deep search, I found this: background: fixed no repeat not working on mobile
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(photos/2452.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm creating a website for a friend of mine.
We got these layout and i've put a flexible background which scales to the current browser size. But the icons placed on the background needs to stay in relative position while scaling the window.
Means if i resize the window it would be fine to have the icons stay on there position.
#icon1{
/*Back*/
position: relative;
//margin-top: 20%;
//margin-left:10%;
widht:20%;
top:20%;
z-index:10;
}
html, body {height: 100%;
// width: 1600px;
margin: 0 auto;
overflow:hidden;
}
#inhalt {height: 100%;
// width: 1500px;
margin: 0 auto;
background: url(wp-content/themes/html5blank-stable/img/bg_small.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
z-index:0;
}
Example
At the moment the icons are fixed at their position.
Thank you for your hints
With the comments from #Paulie_D, I managed to achieve this by, instead of using a backgroud-image for the map, I used an actual image with an img tag. By using an actual image, I the icons scaled to the size of the image (since now the image determines the size of the container). When I used the background image, I had to manually set the height or width of the container, which might not be the actual size of the image.
When adjusting the width size of the page i only want the logo starts containing when there is no room left on either sides of the logo so at that point adjust to the width of the page. Must be quite easy! In the fiddle example is seems to act like i want, but doesn't with my own code it contains the background size (logo) al the time.
I want the logo center page with a one size and adjust the size when the page width reaches the both ends of the logo. Hope you understand my English.
Here the: fiddle
#logo {
display: block;
background: url("http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png");
background-repeat: no-repeat;
background-position: center center;
background-color: white;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
height: 30%;
top: 0;
left: 0;
margin: 0 auto;
padding: 0;
-index: -100;
}
Can anyone help me with this?
I checked the code by creating a single html file with the css in style tags, it didn't work with IE but worked with Chrome and FF.!
I'm trying to make a "Did you know?" fixed div in the right corner. Unfortunately after 3 hours of testing many solutions still can't find correct one. As you can see on this fiddle:
http://jsfiddle.net/dq8f3d4p/ I can't make the background fit the div.
Both: background-size: cover; and background-size: 100%; seems not to work properly.
In your code, you are overwriting background-size with the shorthand background property :
.dyk{
position: fixed;
z-index:2;
width: 17.26%;
height: 11%;
left: 80%;
top: 80%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/gxp9iDV.png);
}
Changing it to background-image property will cause the image to stretch to 100% size.
You are probably looking for background-size:contain;, Which is usually the best pick, however, in your case the image proportions and the div's proportions are not the the same so I would recommend using background-size: 100% 100%;.
background: url(http://i.imgur.com/gxp9iDV.png);
background-size: 100% 100%;
background-repeat: no-repeat;
Working jsFiddle
Notes:
background-size is supported by IE9+
Use contain if you don't want your image to get streched.
put the image inside you div and then fix the div to bottom right
<div class="dyk">
<img src="http://i.imgur.com/gxp9iDV.png"></img>
</div>
.dyk{
position: fixed;
z-index:2;
right: 0;
bottom: 0;
}