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).
Related
I'm trying to get an opaque background on the carousel caption text. A similar problem was reported in February so I think my code format is correct. Any comments are appreciated as I can't think of anything else to try.
.carousel-item {
height: 65vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.portfolio-item {
margin-bottom: 30px;
}
.carousel-caption {
background: rgba(0, 0, 0, 0.65%);
}
The last parameter should be between 0 and 1. In your case, you chose the value 0,65% which is equivalent to 0,0065, that's why you cannot notice the color.
If you want to set it to 65% of opacity, either you set it to 65% or to 0,65.
For more informations, check this URL :
https://www.w3schools.com/css/css3_colors.asp#:~:text=RGBA%20color%20values%20are%20an,and%201.0%20(fully%20opaque).
I am trying to set Background image of an Ion-card which will completely cover the area of card but whenever I add background image it doesn't cover its complete area but It leaves the corner .My code is
<ion-card class="design" style="width : 43%;height: 35%;">
</ion-card>
Scss Code
.design {
background-image: url(../../assets/icon/rectangleCopy25#3x.png);
background-size: cover;
display: inline-block;
}
Try with this,
#design{
background-size: 100%;
background-repeat: no-repeat!important;
background-size: cover!important;
width: 105vw!important;
height: 100vh!important;
margin-left: -10%!important;
background-attachment: fixed!important;
margin-top: -10%!important;
background-position: center center!important;
}
DEMO
Simple:
You need to point your own component to define the style settings.
ion-card {
background-image: url('assets / 35.jpg');
background-size: cover;
(...)
}
You may encounter some problems with your background-image when calling the URL parameter. To resolve this issue if you get in the way of it, go to this link:
https://github.com/vuejs/vue-loader/issues/481
That is because ion card has a default margin of 10px around it.
You can simply do so by overwriting the original CSS by providing your own styling for the .card-md class
.design {
background-image: url(.....);
background-size: cover;
display: inline-block;
}
.card-md {
margin: 0;
}
However, I would recommend you to set background-position as center instead.
.design {
background-image: url(...);
background-size: cover;
background-position: center;
}
Here is a demo.
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'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;
}
I'm trying to place a fullscreen background image combined with a repeating background image without the use of J-query. Is it possible?
This is the code I use to get my image fullscreen:
body {
background: url(../img/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But now I want this completely overlapped by a .png image background that needs to have a repeat function, for the simple reason that the .png contains lines which will rescale and look awful on certain screen sizes.
Any ideas?
Already tried:
Giving html a background and body a background, it will only display one of both.
Be aware that multiple backgrounds won't work on ie8 if needed:
http://caniuse.com/multibackgrounds
This answer will work on every browser:
You must give width and height to the elements.
You can see answer here: http://jsfiddle.net/Rc38f/
HTML Code:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS Code:
html {
width: 100%;
height: 100%;
}
body {
background-image: url('http://www.colourbox.com/preview/4632391-637684-seamless-small-white-flowers-pattern-background.jpg');
background-repeat: repeat;
width: 100%;
height: 100%;
}
#wrapper {
background: url('http://i.telegraph.co.uk/multimedia/archive/02403/Jonstockshooting_2403237b.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
It is possible to include two background images on one tag.
How it Works
Multiple background images can be specified using either the
individual background properties or the background shorthand property.
This should be a Helpful resource to get you started.
css:
body {
background-image: url(http://www.wallcoo.com/paint/Chiplegal_vector_art/images/%5Bwallcoo.com%5D_vector_art_0seasons.jpg), url(http://nopgc.org/v2/images/body_bg.jpg);
background-position: top center, center;
background-repeat: no-repeat, repeat;
width: 100%;
height: 100%;
}
fiddle: Demo