I'm not sure what to do. I want to use one image with two different pictures on it for the image swap (on hover) so there won't be a delay due to a new picture having to be loaded.
But, I'm using background-size: contain because there's a lot of changes in the scale of the image depending on a bunch of different factors. Is there a way to make it work? It's just not working for me at all. It tries to fit the entire img into the space instead of just the half that's supposed to go there.
Here's the css:
.newbutton a:hover , .newbutton a:active{
background-image: url(images/new-post-button.png);
display: block;
background-color: #9bb6c3;
background-position: 0 100%;
}
.newbutton a {
background-color: #c0d6e4;
background-image: url(images/new-post-button.png);
background-position: 0 0;
display: block;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
Related
I'm trying to set multiple background images on my body.
In order to do so, I made this which works, but isn't really doing what I want.
body { background-image: url('https://picsum.photos/100/100'),url('https://picsum.photos/100/100'),url('https://picsum.photos/100/100');
background-repeat: no-repeat,no-repeat,no-repeat;
background-position: center,right top,left top;
background-size: 80%,110px,110px;}
As you will see, there are three images, one to the center, and two others on the sides.
In fact I would like to have the center image with the property repeat in order to really cover the entire body. But If I do that, the two others backgrounds seems to be hidden by the center one. I would like to have the two others backgrounds coming in front of the first center background.
I want also the sides background to be sticky, but this is the next step.
Try this :
body {
margin: 0;
background-image: url('https://picsum.photos/100/100');
background-repeat: no-repeat;
background-position: center,right top,left top;
background-size: 100%;
}
body:before{
content: "";
background-image: url(https://picsum.photos/100/100);
background-size: cover;
width: 200px;
height: 100vh;
float: left;
}
body:after{
content: "";
background-image: url(https://picsum.photos/100/100);
background-size: cover;
width: 200px;
height: 100vh;
float: right;
}
i have this issue with bootstrap 4: i'm working on a web page and i've put a fixed background with css. I want to put multiple <div> one under another, with some transparent space between them, in order to see pieces of the background image in these transparent spaces. The problem is that bootstrap (i guess) makes every kind of background text to be white-coloured so the transparent thing doesn't work. I created a "spazioVuoto" class in css that should make the background transparent, but it doesn't. Can anyone help me?
PS. if you want to see an example of what i'm talking about, look at http://it.diesel.com/it/
here is a codepen example https://codepen.io/anon/pen/ooJqVK
this is my code
html {
background: url(img/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.spazioVuoto {
background-color: transparent;
padding: 5em;
}
The problem here is that your body have a backgournd-color:#fff, so even if spazioVuoto have background transparent the color will be still white because of that. Try to change it (spazioVuoto background-color) to red and you will see that it will work. So you have to put the body background to transparent and then work on other containers to set their background-color.
html {
background: url("w3schools.com/w3css/img_fjords.jpg")
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background-color:transparent !important;
}
.spazioVuoto {
background-color: transparent;
padding: 5em;
}
.container {
max-width: 100% !important;
background-color: #fff;
width: 100% !important;
padding: 1% 20% !important;
}
I have 2 scenarios of background picture in a navbar (I think that is where it is located - I am a beginner w/css).
The height of the background image in the following is big:
.navbar-brand {
font-size:1.5em
}
header {
background-image: url(../../images/backpic.jpg);
background-repeat: none;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
color: #fff
}
The height of the background image in this second one is small:
.navbar-default.navbar-shrink .navbar-brand {
font-size:1.5em
}
header {
background-attachment: scroll;
background-position: center center;
background-repeat: no-repeat;
text-align: center;
color: #fff;
background-image: url(../../images/backpic.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am trying to make the height of the second one, just a little bigger, but not as big as the first one.
I also want to add a nice container in the under the middle left part of the navbar i.e. the "ASDFADF" lettering part.
Any help would be great..
First things first, let's clean up your styling a little bit. All the background properties that you've declared can be combined into one shorthand called background. Here's your code cleaned up:
.navbar-brand {
font-size:1.5em
}
header {
background: url(../../images/backpic.jpg) center center / cover no-repeat;
text-align: center;
color: #fff
}
The background-size no longer requires vendor prefixes and can be combined into the above declaration.
Next, to increase the size of the second image background, do the following:
.navbar-default.navbar-shrink .navbar-brand {
font-size:1.5em
}
header.smaller {
background: url(../../images/backpic.jpg) center center / cover no-repeat;
background-size: 125%; /* Adjust this value to the desired size */
text-align: center;
color: #fff;
}
You'll want to add a different class to the second container so you can target that separately (since they both use the same base element selector).
So I have a full screen background set up like so:
#div {
background-image: url("images/slide1.jpg");
background-position: center 20%;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
The background image resizes according to all view ports sizes, but when I view the site from my mobile, it seems to be displaying a very small section of the whole image - basically the background-size: cover; rule doesn't seem to working. It should also be noted that if I make the window on my computer phone size, the background resizes properly. It also resizes properly when I view it using the responsive display tool 'responsivetest.net'. Just not when I actually open it on a phone.
Any suggestions are, as always, much appreciated.
I'm doing something similar for a portfolio site that's in development and it works fine on mobile. Here's my working code for CSS:
display: table;
width: 100%;
height: auto;
padding: 100px 0;
background: url(../img/bbg1.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
So you can see some things you can try changing, such as the display height.
Test this site on your mobile device
Trying to get full size background image with:
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
It's showing the background image with correct width but height gets stretched.
I tried various options like
html {
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
}
removing height: 100%
but none of them worked.
Your screen is obviously a different shape to your image. This is not uncommon, and you should always cater to this case even if your screen is the same shape (aspect ratio), because other people's screens will not always be. To deal with this, you have only one of three options:
You can choose to completely cover the screen with your image, but not distort the image. In this case, you will need to cope with the fact that edges of your image will be cut off. For this case, use: background-size: cover
You can choose to make sure the entire image is visible, and not distorted. In this case, you'll need to cop with the fact that some of the background will not be covered by your image. The best way to deal with this is to give the page a solid background, and design your image to fade into the solid (although this is not always possible). For this case, use: background-size: contain
You can choose to cover the entire screen with your background, and distort it to fit. For this case, use: background-size: 100% 100%
try with contain instead of cover and then center it:
background-size: contain;
background-position: center;
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;
A better solution might be to use a lightweight jQuery plugin to dynamically size the background to the browser site. One I really like is backstretch.js. They're incredibly simple to implement.
I have same problem I use this CSS on body
background: url(image.jpg);
background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-size: auto auto;
background-color: #0a769d;
height: 100%;
min-height: 100%;
max-height: 100%;
width: 100%;
background-size: 100% 100%;
background-position: center;
max-width: 100%;
min-width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
You should use the body as the selector and not html, this will cause issues with your markup. Your code is below:
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
I would try something like:
body {
background:url('../img/bg.jpg') no-repeat 50% 0 fixed;
margin: 0 auto;
}
You should not have to specify the dimensions for the image.