I'm struggling to have text vertically centred within a background image which has a scroll effect.
I have Top: 34%; at the moment to centre the text on my screen however, that is 34% from the top of the navigation menu. Is there a way for me to set it to 50% from the image that is showing? I'm fine with centring text on a normal image with no scroll effect, however, I feel having background-image (css) with scroll effect rather than a normal img tag on the html page is effecting the result.
This is how I would like it to look like but done with proper margins that make it stay centred. Left: 50%; Top: 34%; That is the margins set in the following image:
.home-section-image {
/* The image used */
background-image: linear-gradient(
rgba(8, 8, 8, 0.05),
rgba(8, 8, 8, 0.25)
),url("../images/pexels-photo-258109.jpg");
opacity: .80;
border-top: 1px solid #000;
/* Set a specific height */
min-height: 505px;
max-height: 505px;
margin: auto;
/* Create the image scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.home-section-image h2 {
position: absolute;
top: 34%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
-webkit-text-stroke: black 2px;
text-align: center;
font-size: 5vw;
} /* Edits text overlaying image positioning, colour of text and adds stroke */
<section id="home" class="home-section">
<div class="home-section-image">
<h2>Kay Park Memorials</h2>
</div>
</section>
You can use in home-section-image
display: flex;
align-items: center;
reference : here
When the background is fixed top is calculated from top of navbar.
what you can do is the give padding of 50-60px check in chrome devtool first to main div containing image
then give the text position relative
.home-section-image{
padding-top : 60px (you need to check first in devtools in my case its 60px)
}
.home-section-image h2
{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
alternate approach
.home-section-image h2
{
padding-top:60px;
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
Related
<div class="divOverlay">
<div class="div-overlay-content" >
<div class="pointer" ></div>
</div>
</div>
I have the following setup where I have a div with a background image and another pointer that always stays in the center. I want to move the background image dynamically to different positions. I am doing that by adjusting the properties
background-position: 0% 0%;
So if I set it to 50% 50%, then the center of the image is aligned with the pointer in the center. which is fine. But I have to tackle the corner scenarios .for eg:- if the value is 0% 0%, then I should have the top left corner of the image aligned to the center (with white background space where there is no image)
How to achieve this just by using CSS (without modifying the image to add the extra white spaces)?
Here is the link to jsfiddle https://jsfiddle.net/mkd914gf/21/
Here is the CSS
.divOverlay {
height: 200px;
width: 200px;
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
overflow-x: hidden;
}
.div-overlay-content{
height: 100%;
width: 100%;
background-image: url(https://topdrawer.aamt.edu.au/var/aamt/storage/images/media/tdt/patterns/p_gt_t3_e1_a1_fig1/278788-1-eng-AU/P_GT_T3_E1_A1_fig1.jpg);
background-position: 0% 0%;
}
.pointer {
left: 50%;
top: 50%;
background-color: red;
position: absolute;
width: 10px;
height: 10px;
background-size: contain;
background-repeat: no-repeat;
}
There are a couple ways you can do this, I've seen some people use ::before and ::after pseudos, or the background-attachment property (works with <img> tags, not backgrounds).
I've opted and gone for absolute positioning the entire div. So we have an absolute positioned div, and a relative positioned parent. We set the height and width for each, plus the background image using background-size. Set overflow to hidden on the overlay. Then just use top right bottom left to position the div holding the image.
I also set you up with a centering method for your red dot that takes the size of the dot into account.
Here's the fiddle: https://jsfiddle.net/9sp2te4o/1/
HTML
<html>
<body>
<div class="divOverlay">
<div class="div-overlay-content" ></div>
<div class="pointer" ></div>
</div>
</body>
</html>
CSS
.divOverlay {
height: 200px;
width: 200px;
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
overflow:hidden; /* Full hidden */
position:relative; /* Set relative so absolute children are contained */
background-color:rgba(255, 0, 0, 0.5);
margin:10px;
}
.div-overlay-content{
position:absolute; /* Absolute the div for positoning */
height: 100%;
width: 100%;
background-size:cover; /* Cover entire div */
left: -25%; /* position the div instead of the image */
top: -25%; /* position the div instead of the image */
background-image: url(https://topdrawer.aamt.edu.au/var/aamt/storage/images/media/tdt/patterns/p_gt_t3_e1_a1_fig1/278788-1-eng-AU/P_GT_T3_E1_A1_fig1.jpg);
}
.pointer {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Position while taking dimensions of div into account */
height:10px;
width:10px;
background-color:red;
}
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 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/
Using web-tiki's responsive square grid lay-out's I have made some responsive squares with background images and text on it as follows:
HTML:
<div class="square bg imgautumn1">
<div class="content">
<div class="table">
<div class="table-cell months">
VISIBLE TEXT
</div>
</div>
</div>
</div>
CSS:
.square {
float: left;
position: relative;
margin: 0.25%;
width: 50%;
padding-bottom : 50%; /* = width for a 1:1 aspect ratio */
background-color: #1E1E1E;
overflow: hidden;
}
.content {
position: absolute;
height: 90%; /* = 100% - 2*5% padding */
width: 90%; /* = 100% - 2*5% padding */
padding: 5%;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.months {
font-size: 40px;
font-weight: 900;
}
.imgautumn1:before {
background-color: black;
}
/* For responsive images as background */
.bg:before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
content:'';
position:absolute;
top:0;left:0;
right:0;bottom:0;
}
.bg{color: #fff;}
/*CHANGE OPACITY ON HOVER*/
.bg:hover:before{opacity:0.2;}
Now I am trying to only make the background transparent, not the text.
While using the opacity: 0.3 property on the imgautumn1 CSS-class the image becomes transparent, but also the text in it. Other techniques like the one from this SO-answer with using a separate div for the background, or a technique with using the :after element from here for the background plus opacity make the positioning of the background go wrong (i.e., image not centred) and I find it hard to implement. Another possibility might be to place a transparent div square on top of the image, but I don't think that is possible with the background-image property.
I hope someone here can provide me with some help on how to only make the background transparent and not the text.
JSFiddle: http://jsfiddle.net/L7m5psrm/
Seems to work fine if you use the :after/:before solution (setting the image as the background)
You just need to make sure you apply the same background properties.
.imgautumn1:before {
background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/* For responsive images as background */
.bg:before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
content:'';
position:absolute;
top:0;left:0;
right:0;bottom:0;
}
Demo at http://jsfiddle.net/L7m5psrm/2/