My buttons and text should remain on background size and be responsive.
This happens when I zoom in.
CSS-
#bg {
height: 100vh;
background-image: url('../../assets/img/2.png'); /* Background Image Link */
background-size: 102%;
background-repeat: no-repeat;
position: relative;
}
.container1 {
display: table;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
What I`m doing wrong?
In your CSS it should be: background-size: cover;
#bg {
height: 100vh;
background-image: url('../../assets/img/2.png');
background-size: cover; /*Change Here*/
background-repeat: no-repeat;
position: relative;
}
Related
I'm trying to achive frosted glass effect with CSS like here: https://codepen.io/GreggOD/full/xLbboZ
But I think, I'm missing something, because it shows me the full image, but smaller size
I have set background-size: cover; background-attachment: fixed;, yet this doesn't fix the problem
#second_wrapper {
background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 250px;
width: 500px;
}
#test_image {
background: inherit;
position: relative;
left: 50%;
top: 50%;
overflow: hidden;
height: 200px;
width: 400px;
transform: translate(-50%, -50%);
}
#blur {
position: absolute;
height: 100%;
width: 100%;
background: inherit;
filter: blur(5px);
}
<div id='second_wrapper'>
<div id='test_image'>
<div id='blur'>
</div>
</div>
</div>
Is this what u wanted?
I added new css rules to #test_image:after
background: inherit;
position: relative;
left: 10%;
top: 10%;
height: 200px;
width: 400px;
/*transform: translate(-50%, -50%);*/
Note that you cannot use transform in this case , because, when you transform, the inherited background image also moves with the div.
Try uncommenting transform and change the values of translate in devtools
#second_wrapper {
background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 250px;
width: 500px;
}
#test_image {
background: inherit;
position: relative;
left: 10%;
top: 10%;
height: 200px;
width: 400px;
/*transform: translate(-50%, -50%);*/
}
#test_image:after {
content: "";
background: inherit;
filter: blur(10px);
width: 400px;
height: 200px;
display: block;
}
<div id='second_wrapper'>
<div id='test_image'>
<div id=''>
T
</div>
</div>
</div>
How do can I get the background image look like it's being shown on the phone? So I have the iPhone masked and I want to put an image on the screen of the phone. How do I do this? I tried playing with z-index but it doesn't work. Here's what I'm trying to achieve
div{
width: 302px;
height: 605px;
background-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_large_2x.jpg);
background-size: 302px 605px;
background-repeat: no-repeat;
-webkit-mask-size: 302px 605px;
-webkit-mask-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_mask_large.svg);
-webkit-mask-repeat: no-repeat;
position: relative;
z-index: 2;
}
.background{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 265px;
height: 571px;
background-image: url(https://www.apple.com/v/iphone-xr/d/images/overview/screen_display_iphonexr_large_2x.jpg);
background-size: 265px 571px;
}
<div>
</div>
<div class="background"></div>
The problem you were having is that the div styles you applied to the phone were also being applied to the .background. By giving the phone it's own separate class you can style them individually.
I've updated your example below.
.phone {
width: 302px;
height: 605px;
background-color: white;
background-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_large_2x.jpg);
background-size: 302px 605px;
background-repeat: no-repeat;
-webkit-mask-size: 302px 605px;
-webkit-mask-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_mask_large.svg);
-webkit-mask-repeat: no-repeat;
position: absolute;
z-index: 2;
}
.background {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
width: 280px;
height: 580px;
border-radius: 10px;
background-image: url(https://www.apple.com/v/iphone-xr/d/images/overview/screen_display_iphonexr_large_2x.jpg);
background-size: cover;
}
<div class="phone"></div>
<div class="background"></div>
I have set a background image. I need that to be responsive. I have used media queries for that, but the image is the same. Should I use background-size or width and height to view it?
As in it gets cropped off. I tried the background-size:100% 100%, but it looks stretched.
The code is given below:
.header-area {
position: fixed;
background: url(images/image.jpg) no-repeat;
background-size:100% 100%;
width: 100%;
height: 100%;
}
.overlay {
position: relative;
z-index: 1;
}
.overlay:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #000000;
opacity: 0.4;
}
make background-size: cover and background-position: center
.header-area {
background-image: url("image url");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
thank you.
I've found the answer.
just needed to modify the code a bit.
.header-area {
position: fixed;
background: url(images/image.jpg) no-repeat center center fixed;
background-size: 100% 100%;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
removed the media query and used this.
I have a background which fills the screen, when I get to 1234px I want to position the background image a little more to the left and a little bit further down, but when I use background-position to offset like this :-
background-position: right 20px bottom 40px;
I get whitespace where it is pushing the background away. Is there a way to resolve this? Here is my css class:-
.full-background{
height:100vh;
width:100%;
background: no-repeat;
background-position: bottom center;
background-origin: content-box;
background-size: cover;
background-image: url('assets/img/background.png');
min-width:100%;
position:relative;
}
You could use a pseudo element, like this
.bkg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.bkg::after {
content: '';
position: absolute;
left: -10%;
top: -10%;
width: 120%;
height: 120%;
background-image: url(http://lorempixel.com/500/400/nature/1);
background-size: cover;
background-position: center;
}
#media screen and (min-width: 900px) { /* add your min-width here */
.bkg::after {
left: calc(-10% + 20px);
top: calc(-10% + 40px);
}
}
<div class="bkg"></div>
so I have background, which width is 1920px, and I'm trying to center it when the resolution is smaller than 1920x1080(1200).
At the moment image shows up, but it isn't in the center of screen.
My code:
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
}
Link about background-position
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position:center; //add
}
if you need to crop the background just use
background-position: top center
this will ensure a centered alignment of the background along the x-axis and and a top-alignment along the y-axis
Try this:
html {
background: url(images/#.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}