I am trying to make my background-img round and put it into center. I am trying with code given below:
.jumbotronhh
{
background-image: url('http://simplelize.com/wp content/uploads/2013/03/old-camera-620x350.jpg');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px; *//If I don't use this line then the background picture stays in center in a rectangular form but after using this I got the bg-img circle but it moves at the left side of the screen..*
}
what to do?! I am totally novice.. pls help..
You could put the image behind everything else to look like an actual background-image, by creating a div class and setting some z-index.
<div class="bg-image">
<img src="mybackground.jpg">
</div>
And CSS:
.bg-image {
position: relative;
min-width: 100%;
min-height: auto;
}
.bg-image img {
position: relative;
width: 100%;
height: auto;
z-index: -100;
border-radius: 30px 30px 30px 30px;
}
Since you really can't use the border-radius in background properties.
I tested your code with another picture and it works fine
Let me know if you mean another thing.
HTML:
<div class="jumbotronhh"></div>
CSS:
.jumbotronhh
{
background-image: url('http://goo.gl/amTgah');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px;
}
Related
I'm using a CSS Sprite Sheet technology and have a problem with multiple backgrounds.
In this website - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img you can see how to set a background from a sprite sheet but my case is a bit different.
Simple code:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: auto;
height: 40px;
background-size: 319px 349px, auto;
}
<div id="nav1"></div>
And the problem is I don't want to show these 2 icons. I want to show only the first one:
How could I make it? I've tried height and width properties but I think it's not for multiple backgrounds.
It is not possible to crop each image in a multiple-background setting separately. So if you want to keep the yellow bar, but only show one icon on it, consider using a pseudo-element, or an actual DOM element reserved to displaying single icons. E.g. here with an <i>:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
background-size: auto;
height: 40px;
width: auto;
}
i.icon1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
background-size: 319px 349px;
display: inline-block;
height: 40px;
width: 40px;
}
<div id="nav1"><i class="icon1"></i></div>
If you want to make sure it stays in the background, use z-index. If you want to make sure it doesn't interfere with the content of #nav1, use position: absolute; top: 0; left: 0 as well.
You would have to specify a width.
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
width: 40px;
height: 40px;
background-size: 319px 349px, auto;
position: relative;
}
#nav1:after {
content: "";
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: 232px;
height: 40px;
position: absolute;
z-index: -1;
}
<div id="nav1"></div>
So I have a transparent image I want to place ontop of an image to create a "fade out" effect. I also have a background image. So all up there is three images.
This is my code
<div class="jumbotron">
div class="hero-dashboard">
<img class="center-block" src="../../img/hero-dashboard.png">
<div class="fade-bottom">
</div>
</div>
CSS
.jumbotron{
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
}
}
They all have to be inside the "jumbotron" div.
Its on the page but it doesn't seem to be listening to the positioning. Can anyone help?
1- The parent div (jumbotron) should have relative position when children are absolute and should have height and width to be visible.
.jumbotron {
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
position:relative;
top:0;
left:0;
width: 500px;
height:30px;
} // correct this closing tag
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
} //correct this
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
// } remove this
// } remove this
2- also correct opening tag < before div class="hero-dashboard">
3- correct the order of opening and closing tgas in your css {}. They seem weird!
Thanks for your help.
I closed the css tags {} like that because I need them to sit within the jumbotron div class. As they are the children of it. Correct me if I'm wrong but I was under the impression that it was the right way to do it.
<div class = "LeftMain" >
<a href = "#" > <button>Go</button></a>
</div>
.LeftMain{
float: left;
width: 600px;
}
.LeftMain {
background: url(Astronaut.jpg);
background-size: 100%;
background-repeat: no-repeat;
}
I'm creating a mini project, and I am trying to create a button appear in front of a background image, this doesn't really work as it only displays a bit of the top part of the background image along with the button "Go". I have floated the section as its two parts but I'm just talking about the left side for now. So how can I make the full background image appear with the button in the centre of the background image?
Do you mean something like this?
.container {
width: 200px;
height: 200px;
position: relative;
background: url(http://www.indiacrunch.in/wp-content/uploads/2014/11/Astronaut-in-India.jpg);
background-size: cover;
background-position: center;
}
.container button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<button>Go</button>
</div>
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/
I'm making an application in which I need to have a login box whose background is transparent, so that the background image of the <body> is displayed as well. Like in LinkedIn:
LinkedIn has a blurry background for this login box. How in CSS can I achieve this?
Here's what I've tried, but it doesn't work.
background-color:ffffff;
opacity:0.4
margin-left:200px;
Can anyone send me in a good direction?
Have you tried to use the filter (for now working only in webkit) ?
Check this: http://davidwalsh.name/css-filters
(I don't have the time to try, but you might have to put two div, one with the image and the filter and another with the form)
Sorry for my english :)
EDIT:
I've made this pen: http://codepen.io/anon/pen/gEmrD
HTML:
<div class="container">
<div class="content">
</div>
<div class="form">
<p>This is you form (with a bit of immagination :P )</p>
</div>
</div>
CSS:
.container {
width: 1000px;
height: 100%;
min-height: 500px;
background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
background-size: 1000px;
background-position: 50% 50%;
display: block;
}
.content {
width: 100%;
height: 300px;
margin: 0;
background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
background-size: 1000px;
background-position: 50% 0;
filter: blur(3px);
-webkit-filter: blur(3px);
display: block;
}
.form {
position: absolute;
top: 200px;
left: 250px;
width: 500px;
height: auto;
background-color: rgba(255,255,255,0.5);
color: #222;
display: block;
}
You should try background-color: rgba(255,255,255,0.5) which makes the background color transparent whereas the opacity: 0.4 makes transparent even the content.
See the DEMO