<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>
Related
I tried to get a background image on the right side of the header, but when I use: background-position: right; or float: right; then it doesn't do anything and I'm not sure if it's possible to style one background image specifically in css when they are both in the same class.
(the image on the left is good as it is, just an example to show that it has multiple backgrounds)
https://jsfiddle.net/qeysvr6c/82/
/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */
.h1_content {
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat; /* pattern for the header, left magnifying glass */
background-size: 4%;
background-color: #00a8f3;
color: white;
}
.h1_content::after {
content: "";
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
background-position: right; /* Doesn't go right? */
background-repeat: no-repeat;
position: absolute;
background-size: cover;
width: 50px;
height: 50px;
}
<article class="text_bottom">
<section class="section_test">
<h1 class="h1_content">Topic here</h1>
<p>Random text here</p>
</section>
</article>
Add position:relative to the heading and right:0 to the :after psuedo-element. Since the :after is position:absolute it will dock to the position relative parent.
There's other ways you could do this with one element, by using multiple background images for example. But this should do the trick.
/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */
.h1_content {
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat; /* pattern for the header, left magnifying glass */
background-size: 4%;
background-color: #00a8f3;
color: white;
position: relative;
}
.h1_content::after {
content: "";
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
background-position: right; /* Doesn't go right? */
background-repeat: no-repeat;
position: absolute;
right: 0;
background-size: cover;
width: 50px;
height: 50px;
}
<article class="text_bottom">
<section class="section_test">
<h1 class="h1_content">Topic here</h1>
<p>Random text here</p>
</section>
</article>
the ::after pesudo element doesnt have the enough width to go to the right so if you give it the space it will be pushed to the right and background-size should be 50px or contain to maintain its ratio :
.h1_content::after {
content: "";
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
background-repeat: no-repeat;
background-position: right;
position: absolute;
background-size: contain;
width: 85%;
height: 50px;
}
or simply just give the parent element position relative and the child should have right:0 :
.h1_content::after {
content: "";
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
background-repeat: no-repeat;
background-position: right;
position: absolute;
right: 0;
background-size: cover;
width: 50px;
height: 50px;
}
Hi guys i am trying to create this effect with bootstrap 3 :
The black color being a random image and then just a white strip on were I can put my text etc.
So far I have this :
HTML:
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
CSS
.parallax {
background-image: url("../img/c.jpg");
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
width: 800px;
}
However no matter what I change the width to for the container , it does not become smaller just the text inside of it does.
So again I am just looking to have a background image cover the whole browser and then just a white strip coming down but the width to be around 800px; so it leaves gaps on the side to see the image in the background
You can make use of min-width and max-width on container class. This ensures that when your browser is resized the sides are still visible by setting the width of the container to a relative (%) value. And the max-width limits it from extending beyond that. You can position the container using transform property in CSS and make an animation for the container to come from top and set its position to the vertical center of the webpage.
As far as the background is concerned, you can set the width or height to 100vw, 100vh or even % as you find suitable. This is just a demonstration.
.parallax {
background-image: url("http://via.placeholder.com/300x100");
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -300px;
background: white;
color: black;
min-width: 70%;
max-width: 800px;
height: 100px;
text-align: center;
animation: expand 2s linear forwards;
}
#keyframes expand {
0% {}
100% {
top: 50%;
transform: translate(-50%, -50%);
}
}
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
html
<div class="parallax">
<div class="cont">
hellowold
</div>
</div>
css
.parallax {
width: 100%;
height: 500px;
position: relative; // this is necessary
background: #000;
}
.cont {
position: absolute;
width: 100%; // for responsive it will take 100% width
max-width: 800px; // for bigger screen it will be max 800px
padding: 15px; // just for decoration
background: #fff;
box-sizing: border-box;
margin: 0 auto; // absoluted element center purpose
bottom: 0; // positioning at the bottom as per your image
left: 0; // absoluted element center purpose
right: 0;// absoluted element center purpose
text-align: center; // just for decoration
}
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;
}
I want to show gradient image over another image but the gradient image is not shown over the another image. My code is as follows:
<style>
.splash-gradient
{
background-image: url('images/gradient.png');
background-position: left;
background-repeat: repeat-y;
float: right;
height: 300px;
width: 362px;
}
</style>
<div class="col-md-6"> <img src="images1.jpg" /></div>
<div id="gradient-background" class="splash-gradient"></div>
Avoid to use empty markup only for styling purpose. You could just add a class to the existant markup
<div class="col-md-6 splash-gradient">
<img src="images1.jpg" />
</div>
and then use this style:
.splash-gradient {
position: relative;
}
.splash-gradient:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url('images/gradient.png') top left repeat-y;
height: 300px;
width: 362px;
}
the gradient is inserted on the :before pseudoelement and since is in position: absolute it overlaps the image (of course feel free to adjust width and height)
I have a fullscreen cover background and I'm trying to get a footer over it which darkens the background. However I also need to put a picture on top of it which get darkened as well. I've tried to use z-index and sliced image with transparency but it was just blue and it didn't work.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
}
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
Any help much appreciated.
Edit:
I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And the CSS
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
background-image: url('footer-bkg.png');}
#footer-main {
left: 50%;
margin-left: -567px;
margin-top: -82px;
position: absolute;
color: white;}
I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And the CSS
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
background-image: url('footer-bkg.png');}
#footer-main {
left: 50%;
margin-left: -567px;
margin-top: -82px;
position: absolute;
color: white;}
try adding
#footer { position: relative; z-index: 9999; }
Where exactly is this picture going? What div is it going into? Because right now if I'm understanding correctly, you just want a box which is on a layer above the background which has reduced opacity. [jsFiddle] Which it is technically already doing.
Can you give us the HTML markup as well? Or input it in a jsFiddle so we can see where the problem is.
Also if Z-indexes weren't working, make sure you are assigning a z-index to every element and not only the #footer.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
z-index: 999;
}
#img_div {
z-index: 1;
}