I have a background picture with size: cover, I also have a part of this image cut out, made lighter and positioned on top of other divs.
The structure is the following
(grey - background, purple - part of this background cut out and positioned on top, pink - menu which is partly(!) covered by that image so I can interact with it)
The problem is that I want cover image to always match with its background when resizing browser window
I set up top and left manually to match background but it still doesn't when height/width ratio changes
<section class="main">
<div class="container">
<div class="content">
Main page content
</div>
<side-container></side-container>
</div>
<img class="cover-image" src="../../assets/img/img-shoes#2x.png" alt="sneakers">
</section>
SASS:
.main
background-color: black
background-image: url('../../assets/img/bg.png')
background-size: cover
background-repeat: no-repeat
overflow: hidden
.cover-image
position: absolute
z-index: 30
width: 31vw
height: auto
left: 4.5vw
top: 15vh
bottom: 0
right: 0
margin: auto
I couldn't figure the problem out due to lack of a demo link or an online version to see what's happening.
but I think this is going to work for you:
.cover-image
position: absolute
z-index: 30
width: 31vw
height: auto
top: 50%
left: 50%
transform: translate( -50%, -50% )
margin: auto
It uses transform to change the position of that <img> according to its width and height, not parent's.
Related
I am working on a promo site with angular 7,
the designer gave me 2 background pictures that complete each other, 1 of them is a real footage with a highlighted part (already in the photo) that should be aligned with the other background.
1) What i should do in order to align between the two and make them responsive.
also should i use img tag or background css.
2) What is the better approach for this kind of issues (should i ask the designer to give me the full background with all elements?)
The last thing i tried is using the img tag which was fine until i added some text with z-index to be on top of the image. i used position: absolute and position:relative in order to insert the elements on top of the background but that scramble everything.
Here is the html:
<div class="main-page-container">
<div class="join-company-container">
<img src="assets/img/photo-bg.jpg" class="responsive" alt="Standing">
<app-join-company class="app-join-company"></app-join-company>
</div>
<div>
<img src="assets/img/rectangle-fill-left.svg" class="responsive-image-left" alt="Smiley face">
</div>
</div>
Here is the css:
.main-page-container {
height: auto;
}
.responsive {
width: 100%;
height: auto;
z-index: -1;
position: absolute;
}
.responsive-image-left {
width: 29.2%;
height: auto;
z-index: -1;
}
.app-join-company {
position:relative;
z-index:1;
}
** app-join-company - is the component that has the text + other elements on top of the first background.
Please note that you don't have any class app-join-company . Only a component called like that (you only have class join-company-app ). I am guessing there is the text. But the text is not actually positioned relative due to the typo.
Also you don't use the class responsive-image-right anywhere.
In adition to this z-index only works on positioned elements(position: absolute, position: relative, position: fixed, or position: sticky). So it won't work for .responsive-image-right or .responsive-image-left.
Inside the body, pass the urls of the background images separated by commas, set the size of each image in the background-size property (separated by commas). Position the background images as needed using the background-position property by setting the top/bottom and left/right for each image (the first value sets the position of the first image and so on).
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-position:
top 16vh left -9vw,
top 77vh left 24vw,
top -30vh right -10vh,
top 91vh right 8vw,
bottom -126vh left 0em
;
background-size: 30%, 20%, 56%, 25%, 100%;
background-repeat: no-repeat;
background-image:
url('/assets/images/img1.svg'),
url('/assets/images/img2.svg'),
url('/assets/images/img3.svg'),
url('/assets/images/img4.svg'),
url('/assets/images/img5.svg')
;
}
I wish to use a 197px X 196px spinner on top of a fullscreen background-image but with the code I am using, it takes the whole space (enormous!).
I just would like it to be at the center of the page with its "normal size", that is to say 197px X 196px
Here is a Demo: https://codepen.io/anon/pen/boqzNb
HTML
<div id="toto" class="" style=" background: #DF2943 url('https://www.ramtrucks.com/shared/htmlcolorizer/images/colorizer/spinner_animation02.gif') center;background-size:cover;"></div>
CSS
#toto {
width: 100%;
height: 100%;
position: absolute;
}
I know the issue comes from the property 'cover' but in the project
I need the property background-size absolutely. On the 'click' event on a certain button, I inject via javascript into the URL a real image and I use background-property 'cover' so that it creates a fullscreen background image. Can I keep cover and 100% width & height for the final real image but restrict the size of the loader while it appears (loader disappears when the final image has fully loaded) ?
It should eb possible to have a 100% width and height background image and until it finishes to load a loading gif with a full REd color in the background and a loading gif on top of it but that this loading gif does not take the whole screen (quite ugly).
How can I manage this?
The width and height are percentages of the container of the element. If you specify width: 100%, you're asking for the element to take up 100% of the container, so yes, it's going to be the whole screen.
If you want the width to be 197 pixels, use width: 197px. The same goes for height.
Use next code:
<div id="toto" class="" style=" background: #DF2943 url('https://www.ramtrucks.com/shared/htmlcolorizer/images/colorizer/spinner_animation02.gif') center center no-repeat;"></div>
it will centered you preloader and no repeat and there is no background-size property.
Since you know the width and height of the spinner, give it these settings to have it in original size and center inside its container (which in the codepen is the window):
#toto {
width: 196px;
height: 196px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
https://codepen.io/anon/pen/zEZeLj
The html
<div id="toto" class=""></div>
The css you need to set background style and keep div size is
#toto {
width: 100%;
height: 100%;
position: absolute;
background-color:#DF2943;
background-image:
url('path/spinner_animation02.gif');
background-size: 195px 195px;
background-repeat:no-repeat;
background-position:center;
}
Hope it helps!
I want to reproduce my mockup : http://imgur.com/ZsR88fe
But I don't know how to skew my background image, only at the bottom. For nom I try the transform skew but all the image is skewed and The top of the page look ugly :
http://imgur.com/TkUgppW
What can I do to fix it ?
Thanks in advance
Skewed or Slanted div, hero or landing pages could be made quickly using the clip-path CSS property with polygon function.
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); //This makes a complete square
The skew could be made reducing the percentage in each angle.
Here's how to make skew on any components.
.skew {
height: 50vh;
width: 100%;
clip-path: polygon(0px 0px, 100% 0px, 100% 80%, 0px 100%);
background:#0a3;
}
<div class="skew">
<h1> Hey there </h1>
</div>
To make a bottom skew for your image with CSS, you're gonna need a few wrappers:
Content div for all the text
Image wrapper that will create the skew and hide the skewed area
Image div that contains nothing but the hero picture
Then you need to apply the opposite skew to the image div to make it not distorted. After that you have to mess around with positioning to ensure that as much of the image is visible and the top skew is hidden. Maybe there's a more clever solution, I just use hardcoded pixel values.
Here's the demo, and here's the important bits:
HTML
<div class="hero">
<div class="bg-img-wrapper">
<div class="bg-img"></div>
</div>
<div class="hero-content">
<h1>Cool company slogan</h1>
<p>Catchy subslogan</p>
</div>
</div>
SCSS (you can just replace the variables and it will be valid CSS, but they help with readability here)
$skewDeg: 5deg;
$offset: 70px;
.hero {
height: 100vh; // Make the hero area take 100% height
overflow: hidden; // Child's skew will cause overflow, so we hide it here
position: relative; // Children will be positioned absolutely relative to this
}
.bg-img-wrapper {
transform: skewY($skewDeg);
position: absolute;
top: -$offset; // Move the top skew offscreen
bottom: $offset; // Move the skewed area up a bit so more of it is visible
right: 0;
left: 0;
overflow: hidden; // Hide the areas that we skewed away
}
.bg-img {
background: url('https://unsplash.it/1280/720/?random') center no-repeat;
background-size: cover;
position: absolute;
top: $offset; // Move the image down by the amount of the parent that's being rendered offscreen
bottom: -$offset;
right: 0;
left: 0;
transform: skewY(-$skewDeg); // Skew the opposite amount of the parent to make the image straight again
}
.hero-content {
position: relative; // Relative positioning here makes the hero content visible
}
I am using CSS3 background-position to position a background image 3% from the right edge of the container. However it appears in a different position compared to if i have an equivalent container that is 97% wide with the background image right aligned. You can see what i mean at http://jsfiddle.net/deshg/9qveqdcu/2/, the logo in the black row is further to the right than the one in the green row but surely they should be in the same horizontal position?
If anyone could shed some light on why this is happening it would be massively appreciated.
For reference, code is below.
Thanks all!
#container {
width: 100%;
background-color: #ffcc00;
}
#d1 {
background-color: #cccc00;
background-image: url('http://jsfiddle.net/img/logo.png');
background-position: right 3% center;
background-repeat: no-repeat;
width: 100%;
}
#d2 {
background-color: #000000;
color: #ffffff;
background-image: url('http://jsfiddle.net/img/logo.png');
background-position: right center;
background-repeat: no-repeat;
width: 97%;
margin-right: 3%;
}
<div id="container">
<div id="d1">
abvc
</div>
<div id="d2">
def
</div>
</div>
The background image itself is being offset 3% of it's own width
From the docs:
Percentages refer to the size of the background positioning area minus
size of background image; size refers to the width for horizontal
offsets and to the height for vertical offsets
Here's an illustration when using 25% 25% (from CSS Tricks):
Background position is not working as you thinking.
It's different than if you, say, had an and positioned it at left: 50%; in that scenario, the left edge of the image would be at the halfway point. If you want to center it, you'll need to pull it back to the left (negative translate or negative margin)
For better understanding refer Link And Link
For what you trying to achieve you have to set
background-position: 96% 0px, center center;
Fiddle
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.