I have managed to get the button image in place correctly but now the positioning is all off.
I want it to be centered as this image shows:
What I have so far is here: http://codepen.io/anon/pen/snjCu.
I am trying to position the image inside the center of its column so that it is correctly in place when the screen is larger.
Any help is appreciated.
<footer>
<div class="banner">
<div class="container-fluid">
<div id="footer-controls" class="text-center">
<div class="col-xs-4"><i class="fa fa-picture-o"></i>
<span>GALLERY</span>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4"><i class="fa fa-file-text-o"></i>
<span>LEGAL</span>
</div>
</div>
</div>
</div>
</footer>
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;;
top: -50px
}
You can adjust the position of the image with a CSS transform
Codepen Demo
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;
top: -50px;
left:50%; /* push the image half-way over */
transform:translateX(-50%); /* bring it back half its own width */
/* or margin-left: -50% of image width */
}
Although not desirable, I've found that giving the column and the orange-button fixed width styles will solve this issue.
.orange-button {
background-image: url('http://i.imgur.com/lmB72tf.png');
background-repeat: no-repeat;
background-size: 215px 210px;
display:inline-block;
width: 215px;
height: 210px;
Usually you can center background images with:
background-position: center center;
This is actually the default value.
However your container with the image is not centered.
You may wanna consider repositioning the container and trying somthing else than position: absolute;
Related
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 position a background image on the right side of the screen so that on medium screens one could see a half of it and on big ones the whole image (the image should not be scaled). The problem is that there seems to be no way to position left side of the background in the center of the div that has an unknown width.
And I can't use an img tag because it will result in a horizontal scrollbar.
EDIT:
It seems that there is no way to position a background the way I wanted, at least with background-position. You can offset a background from either side by writing background-position: top 50px left 100px, but you cannot do the same with position center. I wonder why.
Have you try to set a background size and a background position like so :
background-position: 100% 0;
background-size:50%;
You can test it here: https://jsfiddle.net/dL2u6co7/
Here is a working solution. I added another block with an absolute positioning inside the container.
.container {
margin: 50px;
padding: 10px 10px;
position: relative;
width:400px;
height:270px;
border:2px solid red;
}
.text {
float: left;
height: 200px;
width: 150px;
background-color: green;
}
.bg {
position: absolute;
top: 10px;
left: 50%;
width: 50%;
height: 250px;
background-image: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg');
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}
<div class="container">
<div class="text">
Text block
</div>
<div class="bg">
</div>
</div>
I'm trying to put a responsive form inside a div with a background image that takes the full width off the screen. After searching around a while it seemed the best option to make the background image div the full size of the image was to work with a padding-bottom the size of the image.
The problem now is, when I watch it on smaller screens the background image div is to small to fit the content of the form. I tried using min-width:100% but that didn't help.
html:
<div class="background-image-div">
<div class="centerer-div">
<form id="form">
"some form stuff"
</form>
</div>
</div>
css:
.background-image-div{
background-image: url(background.png)
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 100%;
background-size: contain;
position: relative;
padding-bottom: 25%;
}
.centerer-div{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: auto;
display: table;
width: 100%;
}
#form{
text-align: center;
}
Maybe it's because you're not closing the form tag?
<div class="background-image-div">
<div class="centerer-div">
<form id="form">
"some form stuff"
</form>
</div>
</div>
I´m a CSS beginner. I´ve got two separate containers which should have one background image. I'm using z-index but I don´t know how to make it work.
<!-- Background Image -->
<div class="bg-img"><img class="img-responsive" src="images/bg/bgtriangle.png">
<!-- First Container -->
<div class="container-main">
<p class="font-relative">Headline 1</p>
</div>
<!-- Second Container -->
<div class="container-fluid" style="background-color: #574c5d; border-top: 2px solid #e57e22;">
<h4 class="text-center" style="padding: 5px;">Headline 2</h4>
</div>
</div>
The CSS is:
.container-main {
width: 100%;
height: 100%;
padding-top: 70px;
padding-bottom: 15px;
background: #453a4b;
background-size: cover;
z-index: 1;
}
.container-fluid {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
.bg-img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
z-index: 0;
}
How can I use this one bg-image in full width for two containers? Is that possible?
You need to set your image to the background-image of your bg-img instead of adding it as an HTML img element. Also, you do not need z-index at all for this - they can be removed from your CSS.
.bg-img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('images/bg/bgtriangle.png'); /* This */
}
EDIT:
If you want to move the background of the divs behind the background image, while keeping the content above it, you are going to get into a bit of a messy situation. You can do this by removing the contents from the divs, and then positioning all of them as absolute and using z-index (-1 behind image and 1 in-front of image). However, this means that you have to use top/left/etc. to position the contents back into their divs.
Here is a demo of what I accomplished tinkering a bit, maybe it will be helpful to you.
I am making a website.But I have a problem.My background image comes up bigger than the screen every time I preview it.
HTML:
<div class="image">
<img src="images/background.jpg" alt="">
</div>
CSS:
.image {
position: absolute;
margin-left: -50px;
margin-top: -25px;
}
My image's size is 1920x1200
EDIT:
I did it by this code:
html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I would recommend putting the background image in through the CSS and then using background-size: cover; as this will scale it with the browser window.
Try this:
CSS
.image {
background-image:url(images/background.jpg);
background-size:100%;
position: absolute;
margin-left: -50px;
margin-top: -25px;
width:Xpx; /* change X to what you want */
height:Ypx; /* change Y to what you want */
}
HTML
<div class="image">
</div>
It's important however that you with this method add height and width properties to .image, so that the div won't have 0x0 in dimensions.
I dont know what you are trying to do here but you are adding the styles to the div not the image.
.image img{ position: absolute; margin-left: -50px; margin-top: -25px; }
Would be the markup to affect the image inside a div.
Anyway use body background-image instead. And there are some js files for fitting images to any size display.
Good luck with your site!