I have a background image with some objects like a company logo. This image is a full screen background and I want to align an element with the company logo and make it responsive.
I have searched for some similar solutions and tried using a solution proposed in this link:
How to position an element relative to the background image width
Although I am able to position the element correctly, it doesn't remain in the same place relative to the image when the screen is resized.
How can I keep this html element always aligned?
body {
width: 100%;
height: 100%;
background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
.container{
position: relative;
}
.fixed-title{
position: absolute;
top: 0;
margin: 28% 0 0 54%;
}
<div class="container">
<h1 class="fixed-title">Apple</h1>
</div>
Edit: Coupled with what I wrote below, this should be what you're after :) All that is left to do is change the percentages to match the position you're after. If you need to move something in px you can use calc() css function to do
height: calc(100% - 100px);
This would make your thing 100% of the height - 100px.
body {
width: 100%;
height: 100%;
position:relative
background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
.title-container{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
<body>
<div class="title-container">
<h1>My Title</h1>
</div>
</body>
It looks like you are halfway there already having used postionion:absolute already.
I would suggest instead of using margin:28% 0 0 54% to look into using the transform property coupled with translateX() and translateY() or the shorthand version translate( , );.
The solution below puts your title in the very center of the container.
.fixed-title{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
This solution only centers your h1 on the Y axis (up and down)
.fixed-title{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This solution only centers your h1 on the X axis (left and right)
.fixed-title{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Hopefully this helps :)
P.s. Here is a link to a great article on all the uses for the transform property : https://css-tricks.com/almanac/properties/t/transform/
Related
I need to create full width, transparent triangle with border and some elements inside via CSS. Does somebody know how to do that?
Thanks in advance.
You can create triangle as vector (svg) here.
You can convert from svg file to base64 here.
body {
background-color: #444;
}
#triangle {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBpZD0ic3ZnXzEiIGQ9Im0yLjk5LDc5Ni44MzM4MmwzOTYuOTk5OTgsLTc5My43NTA3bDM5Ni45OTk5OCw3OTMuNzUwN2wtNzkzLjk5OTk3LDB6IiBmaWxsPSIjZmZmZmZmIi8+CiA8L2c+Cgo8L3N2Zz4=");
background-size: cover;
background-repeat: no-repeat;
height: 300px;
position: relative;
width: 300px;
}
#circle {
background-color: #7220fd;
border-radius: 50%;
height: 90px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, 20%);
width: 90px;
}
<div id="triangle">
<div id="circle"></div>
</div>
See it on jsfiddle.
You did not provide any code or background image to use, I have to generate new for testing and the result may not exactly to your screenshot. However you can change the triangle vector using the link above.
To customize circle position, change the argument of translate(). The first is horizontal position, second is vertical position.
<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've got to shape background, left top and right top shapes. I need to hold the original size of shapes, but the shapes layer over another div. The image moved over the top banner and navigation. How to hold backfround image size, and don't overlay onother div. Should I make all other div relative with z -index.
<div class="nav">NAV SECTION</div>
<div class="top-banner">TOP BANNER SECTION</div>
<div class="wrapper">
<div class="container">
some content here/grid and on....
<div class="shape-left shape-left--top"></div>
<div class="shape-right shape-right--top"></div>
</div>
.shape-right, .shape-left {
height: 100%;
width: rem-calc(500);
max-width: rem-calc(500);
pointer-events: none;
}
/*=========================================================
01. #SHAPE PLACEMENT LEFT
=========================================================*/
.shape-left--bottom {
position: absolute;
right: 0;
left: 0;
bottom: 0;
background-repeat: no-repeat;
background-position: 0 -28%;
}
.shape-left--top {
position: absolute;
right: 0;
left: 0;
top: -40%;
background-image: url(https://s12.postimg.org/p508mxwwd/shape_left_top.png);
background-repeat: no-repeat;
}
/*=========================================================
02. #SHAPE PLACEMENT RIGHT
=========================================================*/
.shape-right--bottom {
position: absolute;
right: 0;
left: 0;
bottom: 0;
background-position: 0 -28%;
}
.shape-right--top {
position: absolute;
right: -5%;
left: inherit;
top: -40%;
background-image: url(https://s18.postimg.org/v31a5sthl/shape_right_top.png);
background-repeat: no-repeat;
}
Though i am unable to produce the issue with the code and css you shared. But here are a few pointers if they help find a solution. As your using position absolute so you need to control the positioning by using the left, right, top and bottom properties to make sure the image divs dont overlay over other relative positioned divs. Second have you tried using background-size: cover; or background-size:contain; within the .shape-left--topand .shape-right--top classes? (Note: you will still need to position the image divs as they are absolute after applying background-size property according to your need)
I'm trying to have a full screen image, easy enough with css using the code below.
width:100%;
height:100%;
background: url('photo2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
but the image is already placed in an html div, see here
<div class="fixed-background">
<img src="photo2.jpg"/>
</div>
It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.
try this
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
<html>
<body>
<div class="fixed-background">
<img src="public/dbs/images/1.jpg" class="myimg" />
</div>
</body>
</html>
Use object-fit: cover; on the <img> tag:
<div>
<img src="photo2.jpg" style="object-fit: cover;"/>
</div>
that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit
Without using a background, consider this:
#mydiv {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin-top: -100px; /* (calculate half the height of your image) */
margin-left: -100px; /* (calculate half the width of your image) */
}
Full screen Image? you could do something like this through HTML
<div class="fixed-background">
<img src="photo2.jpg" height="100%" width="100%">
</div>
http://jsfiddle.net/pj73m4po/
EDIT:
or are you looking for something like this?
http://jsfiddle.net/pj73m4po/1/
Try the following: http://jsfiddle.net/pj73m4po/4/
Put your image in a div 100% high and wide. If you don't want your image to be stretched you don't want to use width and height seperately.
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
Instead use min-width and min-height. if you have a predefined image you can adjust the position in css. If you don't unfortunately you need javascript to center it.
The points that I gather from your css are the following:
Center the image
Fix the position of the image (so it doesn't scroll with the page)
Cover the viewport, scale proportionally to fit
That said, I suggest the following given your html
.fixed-background{
position:fixed;
width:100vh;
height:100vh;
overflow:hidden;
}
.fixed-background > img{
position:absolute;
width:100%;
height:auto;
top: 50%;
transform: translateY(-50%);
}
Honestly, I haven't tested the above but I would suspect you might get some weird results using fixed and absolute positioning together. But since the code defines the width and height directly using viewport units, it should be good. You might need 100vh of margin applied to a sibling element to get things to line up because position:fixed; will break the element out of the document flow.